jQuery：切換任何其他下拉菜單

Question

我想知道如何做到這一點，這樣當我打開一個下拉菜單並打開另一個下拉菜單時，它將關閉先前打開的下拉菜單。

這是我到目前為止的內容：

 $(document).ready(function(){ // Hide other drop downs when opening another // $(".hideothers").hide(); // $(".show_hide_account").click(function(){ // $(".slidingDiv_account").slideToggle(); // }); // Account Drop down $(".slidingDiv_account").hide(); $(".show_hide_account").show(); $(".hideothers").hide(); $(".show_hide_account").click(function(){ $(".slidingDiv_account").slideToggle(); }); // Work drop down $(".slidingDiv_work").hide(); $(".show_hide_work").show(); $(".hideothers").hide(); $(".show_hide_work").click(function(){ $(".slidingDiv_work").slideToggle(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!--sidebar start--> <aside> <!-- Start of Toggle --> <div id="sidebar" class="nav-collapse "> <!-- sidebar menu start--> <ul class="sidebar-menu" id="nav-accordion"> <p class="centered"><a href="/user/#"><img src="assets/img/ui-sam.jpg" class="img-circle" width="60"></a></p> <h5 class="centered">USER</h5> <!-- Account Dropdown --> <li> <a class="show_hide_account"> <i class="fa fa-chevron-down"></i> <span>Account</span> </a> </li> <!-- Toggled Items --> <ul class="sub slidingDiv_account hideothers" style="display: block;"> <!-- Start of toggle --> <li> <a href="/account"> <i class="fa fa-pencil"></i> <span>Edit Account</span> </a> </li> <li> <a href="/users"> <i class="fa fa-pencil"></i> <span>Find Users</span> </a> </li> </ul> <!-- end of toggle --> <!-- Work Dropdown --> <li> <a class="show_hide_work"> <i class="fa fa-suitcase"></i> <span>Work</span> </a> </li> <!-- Toggled Items --> <ul class="sub slidingDiv_work hideothers" style="display: block;"> <!-- Start of toggle --> <li> <a href="/jobs"> <i class="fa fa-search"></i> <span>Find a Job</span> </a> </li> <li> <a href="/startup"> <i class="fa fa-star"></i> <span>Create a Startup</span> </a> </li> </ul> <!-- end of toggle --> <!-- <li class="mt"> <a href="index.html"> <i class="fa fa-users"></i> <span>Friends</span> </a> </li> --> </ul> <!-- sidebar menu end--> </div> </aside> <!--sidebar end --> 

請參閱摘要以獲取更清晰的想法。 點擊帳戶和工作以查看下拉菜單。

謝謝。

Answer 1

 $(document).ready(function(){ function slideAllUp(obj) { $(".hideothers").each(function(){ if ($(this)[0] != obj[0]) { $(this).slideUp(); //perform on all except self. } }) } // Account Drop down $(".slidingDiv_account").hide(); $(".show_hide_account").show(); $(".hideothers").hide(); $(".show_hide_account").click(function(){ slideAllUp($(".slidingDiv_account")); $(".slidingDiv_account").slideToggle(); }); // Work drop down $(".slidingDiv_work").hide(); $(".show_hide_work").show(); $(".hideothers").hide(); $(".show_hide_work").click(function(){ slideAllUp($(".slidingDiv_work")); $(".slidingDiv_work").slideToggle(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!--sidebar start--> <aside> <!-- Start of Toggle --> <div id="sidebar" class="nav-collapse "> <!-- sidebar menu start--> <ul class="sidebar-menu" id="nav-accordion"> <p class="centered"><a href="/user/#"><img src="assets/img/ui-sam.jpg" class="img-circle" width="60"></a></p> <h5 class="centered">USER</h5> <!-- Account Dropdown --> <li> <a class="show_hide_account "> <i class="fa fa-chevron-down"></i> <span>Account</span> </a> </li> <!-- Toggled Items --> <ul class="sub slidingDiv_account hideothers" style="display: block;"> <!-- Start of toggle --> <li> <a href="/account"> <i class="fa fa-pencil"></i> <span>Edit Account</span> </a> </li> <li> <a href="/users"> <i class="fa fa-pencil"></i> <span>Find Users</span> </a> </li> </ul> <!-- end of toggle --> <!-- Work Dropdown --> <li> <a class="show_hide_work dropdown"> <i class="fa fa-suitcase"></i> <span>Work</span> </a> </li> <!-- Toggled Items --> <ul class="sub slidingDiv_work hideothers" style="display: block;"> <!-- Start of toggle --> <li> <a href="/jobs"> <i class="fa fa-search"></i> <span>Find a Job</span> </a> </li> <li> <a href="/startup"> <i class="fa fa-star"></i> <span>Create a Startup</span> </a> </li> </ul> <!-- end of toggle --> <!-- <li class="mt"> <a href="index.html"> <i class="fa fa-users"></i> <span>Friends</span> </a> </li> --> </ul> <!-- sidebar menu end--> </div> </aside> <!--sidebar end --> 

此編輯引入了一個名為slideAllUp的函數。 它通過.hideothers類.hideothers所有.hideothers 。 調用slideAllUp您需要傳遞不應該上升的ul 。 這樣，它關閉了所有其他窗口，並打開了一個被單擊的窗口。 例外是允許菜單再次關閉。