Question

首先对随机标题道歉，我真的无法想到另一种简洁的方式。

这是我的问题。

我有几个导航图标，当点击切换菜单显示时，就像你到处看到的那样：facebook等。

当您点击div外部时，它会隐藏菜单。

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

单击外部可以关闭打开的div，但点击触发切换的图标不会将其关闭，只需立即重新切换即可。
我希望能够在没有关闭的情况下点击菜单内部，他们目前正在进行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();
   }
});

FIDDLE

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();
});

工作FIDDLE https://jsfiddle.net/ne4yfbjp/

Answer 1

你可以试试这个

＆＃13;

$(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();
    }
  }
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

切换菜单但也允许单击内部而不关闭

1 个答案: