Question

我想在一系列div中添加一个mouseup事件，点击后会显示一个子div（'menu'）。所有父div都共享同一个类，例如：

<div class="container">
  <div class="menu"><p>Text</p></div>
</div>
<div class="container">
  <div class="menu"><p>Text</p></div>
</div>
etc...

但是，我希望这个事件只在我点击那个特定的'容器'时触发。当我点击另一个'容器'时，我想要发生同样的事情，但是，我也喜欢先前打开的'菜单'来隐藏。我设法做到这一点（作为一个JQuery noob）的唯一方法是为每个容器创建变量，并为它们提供唯一的类。例如：

  $(document).mouseup (function (e){

   var buttonOne = $(".containerOne");
   var buttonTwo = $(".containerTwo");
   var menuOne = $(".containerOne").find(".menu");
   var menuTwo = $(".containerTwo").find(".menu");

   if(buttonOne.is(e.target)){
     menuOne.toggle(100);
     menuTwo.hide();

   }

   else if(buttonTwo.is(e.target)){
     menuTwo.toggle(100);
     menuOne.hide();
   }

   else {
    $(".menu").hide();
   }
 });

快速JSFiddle

然后，我创建了更多容器的代码行和代码行，我觉得几乎可以肯定这样做更简单。抱歉如果这写得不好，这是漫长的一天，哈哈。

Answer 1

向containerxxx元素添加新类，然后使用简单的单击处理程序

<div class="containerOne container">
    <div class="menu">
        <p>Text</p>
    </div>
</div>
<div class="containerTwo container">
    <div class="menu">
        <p>Text</p>
    </div>
</div>

然后

var $menus = $('.container .menu');
$('.container').mouseup(function (e) {
    var $menu = $(this).find('.menu').toggle();
    $menus.not($menu).hide()
});

演示：Fiddle

Answer 2

像

这样的东西

$(".container").on("click", function() {
    var mine = $(".menu", this).toggle(100);
    $(".menu").not(mine).hide();
});

Jquery - 将事件添加到与其他人共享类名的特定div

2 个答案: