卡在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");
      }); 
});