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 。 这样，它关闭了所有其他窗口，并打开了一个被单击的窗口。 例外是允许菜单再次关闭。