Jquery關閉/打開多個切換

我在我的菜單中切換成功爲我在其中的兩個鏈接工作。由於頂部鏈接一旦切換到另一個鏈接，就沒有問題了。但是由於它下面的鏈接使頂部鏈接暴露，用戶可以點擊該鏈接，現在有兩個打開的項目打開並且幾乎堆疊在一起。有沒有辦法讓我檢查另一個切換的項目是否打開，如果是，關閉它？謝謝！Jquery關閉/打開多個切換

<div class="parents-toggle"> 
<a href="#" id="customize-toggle">Customize</a><br/> 
<div class="menu-toggle hidden" id="customize-menu"> 
<div class="menu-toggle-one"> 
<h3>Background</h3> 
    <ul> 
    <li><a href="#">Dark Wood</a></li> 
    <li><a href="#">Wallpaper</a></li> 
    <li><a href="#">Bricks</a></li> 
    <li><a href="#">Planks</a></li> 
    <li><a href="#">Default</a></li> 
</ul> 
</div>  
<div class="menu-toggle-two"> 
<h3>Layout</h3> 
<ul> 
    <li><a href="#">Grid</a></li> 
    <li><a href="#">List</a></li> 
    <li><a href="#">Full</a></li> 
</ul> 
</div> 
</div> 
</div> 
<a href="/submit/">Submit video</a><br/> 
<div class="parents-toggle"> 
<a href="#" id="channels-toggle">Channels</a> 
<div class="menu-toggle hidden" id="channels-menu"> 
    <div class="menu-toggle-one"> 
    <ul> 
    <li><a href="#">Automotive</a></li> 
    <li><a href="#">Comedy</a></li> 
    <li><a href="#">Movies</a></li> 
    <li><a href="#">Weather</a></li> 
    </ul> 
</div> 
<div class="menu-toggle-two"> 
    <ul> 
    <li><a href="#">Business</a></li> 
    <li><a href="#">Commercials</a></li> 
    <li><a href="#">Music</a></li> 
    <li><a href="#">Technology</a></li> 
    </ul> 
</div> 
</div> 
</div> 
</div> 

<script> 
$("#customize-toggle").click(function() { 
$("#customize-menu").toggle(); 
}); 
$("#channels-toggle").click(function() { 
$("#channels-menu").toggle(); 
}); 
</script>

來源

2010-05-15 Pedro

，可以稍微調整了jQuery，因爲你已經對所有的切換菜單一個menu-toggle類，只是藏在那些不是你在點擊處理程序想要的ID，像這樣：

$("#customize-toggle").click(function() { 
    $(".menu-toggle:not(#customize-menu)").hide(); 
    $("#customize-menu").toggle(); 
}); 
$("#channels-toggle").click(function() { 
    $(".menu-toggle:not(#channels-menu)").hide(); 
    $("#channels-menu").toggle(); 
});

You can see a demo here。

此外，如果你想要的，因爲你的菜單有一個一致的佈局，您可以點擊處理程序相對切換DIV發現該鏈接，不需要匹配ID，像這樣：

$(".parents-toggle > a").click(function() { 
    $("div.menu-toggle").not($(this).siblings()).hide(); 
    $(this).siblings(".menu-toggle").toggle(); 
});

You can see a demo of that here

最後，如果你想一點的動畫，您可以輕鬆地使用.slideUp()和.slideToggle()，這樣添加：

$(".parents-toggle > a").click(function() { 
    $("div.menu-toggle").not($(this).siblings()).slideUp(); 
    $(this).siblings(".menu-toggle").slideToggle(); 
});

You can see that here :)

來源

2010-05-15 06:46:18

這太好了！謝謝您的幫助。 – Pedro 2010-05-15 12:50:03

尼克，是否有任何理由爲什麼這在FF中工作得很好，但在Chrome或Safari中，事件不會觸發，菜單也不會打開。當我看着你的演示，他們在所有的瀏覽器中工作正常，但我沒有在那裏有任何不同。有什麼想法嗎？謝謝！ – Pedro 2010-05-15 13:15:54

@Pedro - 確保你的代碼被包裝在'document.ready'中，像這樣：'$（function（）{...答案代碼在這裏...}）;'所以它在元素準備好後運行。 – 2010-05-15 13:21:23

我做我的網站上爲我添加了一個事件處理程序的主體元素，而我使用的是作爲一個包羅萬象的，要檢查是否打開菜單，然後如果是，關閉它。

來源

2010-05-15 02:43:32

Jquery關閉/打開多個切換

回答

相關問題