Jquery - 將事件添加到與他人共享類名的特定div

我正在尋找將mouseup事件添加到一系列divs，單擊時會顯示子div（「菜單」）。所有家長的div共用同一類，例如：Jquery - 將事件添加到與他人共享類名的特定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

這然後創建行和代碼行的多個容器我補充，我覺得那裏幾乎可以肯定是這樣做的一個簡單的方法。道歉，如果這寫得不好，這是漫長的一天，哈。

來源

2014-02-06 captainoats

給他們所有同一班。點擊容器後，隱藏*全部*菜單，然後顯示相應的菜單。 – Pointy

查看JQuery中的$（this）語句 –

添加一個新類到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

來源

2014-02-06 15:36:54

這是完美的謝謝。 – captainoats

如何像

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

來源

2014-02-06 15:38:20 Edward

Jquery - 將事件添加到與他人共享類名的特定div

回答

相關問題