单击外部关闭下拉菜单仅在单击外部 <nav> 时有效

Question

我正在构建的以下导航工作得很好，但是我注意到当单击导航按钮外部但仍在 <nav> 容器内时，打开的下拉菜单不会按应有的方式关闭，但是它会在以下情况下关闭单击外部 <nav>。怎么可能？感谢您的帮助。

JQuery

$(document).ready(function() {
  $(".click").on("click", function(e) {
    var menu = $(this);
    toggleDropDown(menu);
  });

  $(document).on('mouseup',function(e) {
    var container = $("nav");

    // if the target of the click isn't the container nor a descendant of the container
    if (!container.is(e.target) && container.has(e.target).length === 0) {
      $('a.active').parent().find('.showup').stop(true, true).slideUp(500, function() {
        $(".main-container").removeClass("black-bg");
        if ($('a.active').hasClass('active')) {
          $('a.active').removeClass('active');
        }
      });
    }
  });

});


function toggleDropDown(menu) {
  var isActive = $('a.active').length;
  $('a.active').parent().find('.showup').stop(true, true).slideUp(500, function() {
    $(".main-container").removeClass("black-bg");
    if (menu.hasClass('active')) {
      menu.removeClass('active');
    } else {
      $('a.active').removeClass('active');
      menu.addClass('active');
      menu.parent().find('.showup').stop(true, true).slideDown(500, function() {
        $(".main-container").addClass("black-bg");
      });
    }
  });
  if (!isActive) {
    menu.addClass('active');
    menu.parent().find('.showup').stop(true, true).slideDown(500, function() {
      $(".main-container").addClass("black-bg");
    });
  }
}

Answer 1

你必须改变你的容器，比如：

var container = $("nav .top-bar-section ul");

单击外部关闭下拉菜单仅在单击外部 <nav> 时有效

Click outside to close dropdown only works when click outside <nav>

javascript

jquery

nav

drop-down-menu