被切换后无法点击按钮

Question

我无法使用按钮关闭下拉菜单，但当我点击页面外部时可以关闭它。

这里是演示

var $menu = $('.menu');

$('.toggle').click(function () {
  $menu.toggle();
});

$(document).mouseup(function (e) {
   if (!$menu.is(e.target) // if the target of the click isn't the container...
   && $menu.has(e.target).length === 0) // ... nor a descendant of the container
   {
     $menu.hide();
  }
 });

请大家帮个忙。

- Potato

---

你在这里遇到的问题是mouseup处理程序先触发，因此当鼠标按钮在页面上的任何元素上释放时（包括您的按钮），您会隐藏菜单。按钮的click处理程序仅在此之后触发，因此当toggle方法检查菜单元素的当前状态时，它发现它被隐藏了，因此它被切换为可见状态。 - misorude

如果你在mouseup处理程序中修改你的检查，以检查.dropdown元素或其后代是否为目标，则应该可以工作。（因为这样你的按钮就被包括在内了。） - misorude

使用 event.stopPropagation(); @john 看看我的回答。 - Sumesh TG

Answer 1

只需在鼠标单击时执行一个操作即可。您的JS必须是：

var $menu = $('.menu');
var $toggle = $('.toggle');

$(document).mouseup(function (e) {
  if ($toggle.is(e.target)) {
    $menu.toggle()
  } else {
    $menu.hide();
  }
});

- Alexander N. Morgunov

Answer 2

$(document).ready(function(){
  var $menu = $('.menu');

$('.toggle').click(function (e) {
e.stopPropagation();
  $menu.toggle();
});
$('.container').click(function (e) {
e.stopPropagation();
  $menu.toggle();
});
});

.dropdown {
  margin: 200px auto;
  position: relative;
  width: 50%;
}

.toggle, .dropdown-menu {
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="text-center col-xs-12">
      <h1>jQuery: click outside to close menu</h1>
      <p>Click the button to toggle the dropodown menu.</p>
      <p>Then click outside dropdown menu to close.</p>
      <div class="dropdown">
  <a href="#" title="" class="btn btn-default toggle">Toggle menu</a>
  <ul class="dropdown-menu menu">
    <li class="dropdown-item">List item 1</li>
    <li class="dropdown-item">List item 2</li>
    <li class="dropdown-item">List item 3</li>
</div>  
    </div>
    </div>
  </div>

使用 event.stopPropagation();，这不会阻止同一元素上的其他处理程序运行。

- Sumesh TG

---

在CodePen中，您不需要这样做。这不是问题的重点。他试图为一个对象绑定两个类似的事件：.toggle上的click和包含.toggle的整个document上的mouseup。 - Alexander N. Morgunov

@SumeshTG，您是指这段代码吗？在按钮单击事件中隐藏菜单永远不会起作用。因为有两个类似的事件，但回调函数不相似。 - Alexander N. Morgunov

Answer 3

如果你想通过按钮打开和关闭。只需移除第二个函数，你的代码就会正常工作。

var $menu = $('.menu');

$('.toggle').click(function () {
  $menu.toggle();
});

- Devansh