Question

$('button.dropnav-toggle').on('click', function(e) {
            $('#parent-dropnav').toggleClass('parent-open');
            $('.not-header').on('click', function(e) {
            if (!$(event.target).closest('.drop-menu').length) {
                $('.drop-menu').hide();
            };
        });
        });

我有一个带有引导程序的下拉汉堡包。这段代码大部分都适用，但是我遇到了问题。当点击标题以外的任何内容时，它会成功下降并隐藏。单击关闭下拉列表后，它会成功隐藏，但是在页面刷新之后，能够再次单击并再次下拉的唯一方法是。

Answer 1

每次用户打开下拉列表时，您都会设置新的侦听器。使它更简单。

你需要一个切换菜单的监听器：

$(document).on('click', '.dropnav-toggle', function(e) {

    e.stopPropagation(); //stop propagation of the event
    $('.drop-menu').toggle();           
    $('#parent-dropnav').toggleClass('parent-open'); //not sure if you need this one
});

另一个关闭下拉列表

   $('body').on('click', function(e) {

          $('.drop-menu').hide();
   });

现在，如果用户点击任何类.dropnav-toggle的元素，您的下拉列表将切换 - 根据以前的状态打开或关闭。对主体的任何其他点击将关闭菜单。未经测试但应该有效。

Javascript Jquery Dropdown隐藏在空格上，但它会在刷新之前中断下拉列表

1 个答案: