时间戳

首页 > 解决方案 > 单击外部关闭下拉菜单仅在单击外部时有效

javascript - 单击外部关闭下拉菜单仅在单击外部时有效

问题描述

我正在构建的以下导航工作得很好，但是我注意到当单击导航按钮外部但仍在<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");
    });
  }
}

标签： javascriptjquerydrop-down-menunav

解决方案

您必须更改容器，例如：

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

推荐阅读