停留在 dropdown.js

Question

$(function(){
    // Show hide popover
    $(".dropdown").click(function(){
        $(this).find(".dropdown-menu").slideToggle("fast");
    });
});
$(document).on("click", function(event){
    var $trigger = $(".dropdown");
    if($trigger !== event.target && !$trigger.has(event.target).length){
        $(".dropdown-menu").slideUp("fast");
    }            
});

这是我的下拉菜单 js，当我点击几个（我有多个）时它不会关闭前一个，我需要它关闭，否则它会被下拉菜单淹没。

我还在学习 js，所以我运行遇到了一些问题。

Answer 1

这种事情的一般想法是监听点击并在点击不是来自下拉列表本身或其任何子元素时关闭下拉列表.

为此，您可以使用 closest()。

$(() => {
    $(".dropdown").on('click', () => {
        $(this).find('.dropdown-menu').slideToggle('fast');
    });
    $('body').on('click', event => {
        if (!$(event.target).closest('.dropdown').length)
            $('dropdown-menu').slideToggle('fast');
    });
});

Answer 2

一个简单的想法是关闭所有下拉菜单，然后弹出单击的那个。

$(document).ready(function(){
    $(".dropdown").click(function(){
        $(".dropdown .dropdown-menu").slideUp();
        $(this).find(".dropdown-menu").slideDown("fast");
      }); 
});

停留在 dropdown.js

Stuck on dropdown.js

html

javascript

dropdown