javascript - 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 类传递所有 UL。调用 slideAllUp 时，您需要传递不应该向上的 ul。这样它就会关闭所有其他的并打开点击的那个。异常(exception)情况是允许菜单再次关闭。