切换菜单，但也允许在不关闭的情况下单击内部

Question

首先为随机标题道歉，我真的想不出另一种简洁的方式。

这是我的问题。

我有几个导航图标，当点击切换菜单时会显示，就像你在任何地方看到的一样：facebook 等。

当您在div 之外单击时，它会隐藏菜单。

它有效，但我有两个问题。

1. 点击外部可以关闭打开的 div，但点击触发切换的图标不会关闭它，它只是立即重新切换。

2. 我希望能够在不关闭菜单的情况下单击菜单内部，他们目前正在这样做onclick。

html 看起来像这样，其中user-menu 是可点击的图标，用于切换其中包含的div。

HTML

<nav>
  <div class="user-menu">
    <div id="user-dropdown">MENU CONTENTS HERE</div>
  </div>
</nav>

jQuery

$('.user-menu').click(function () {
   $('#user-dropdown').fadeToggle();
});

$(document).mouseup(function(e) {
   var container = $("#user-dropdown");
   if (!container.is(e.target) && container.has(e.target).length === 0) {
    container.hide();
   }
});

小提琴

https://jsfiddle.net/vo8a1r0p/

编辑 - 回答

结合使用 Bhuwan 的答案和 stopPropagation()，它现在可以正常工作了。

工作 jQUERY

$(document).on("click", function(e) {
  if ($(e.target).hasClass("user-menu")) {
    $('#user-dropdown').fadeToggle();
  } else {
  if ($(e.target).hasClass("dropdown-menu")) {
    $('#user-dropdown').show();
  } else {
    $('#user-dropdown').fadeOut();
  }
 }
});

$("#user-dropdown").click(function(e){
  e.stopPropagation();
});

工作小提琴 https://jsfiddle.net/ne4yfbjp/

Answer 1

你可以试试这个

$(document).on("click", function(e) {
  if ($(e.target).hasClass("user-menu")) {
    $('#user-dropdown').fadeToggle();
  } else {
    if ($(e.target).closest("#user-dropdown").hasClass("dropdown-menu")) {
      $('#user-dropdown').show();
    } else {
      $('#user-dropdown').fadeOut();
    }
  }
});

.dropdown-menu {
  display: none;
  background: gray;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <div>
    <button class="user-menu">Menu</button>
    <div id="user-dropdown" class="dropdown-menu">
      <div class="username">
        Some User
      </div>
      <ul>
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link1</a></li>
      </ul>
    </div>
  </div>
</nav>