Question

我有一些dropdowns包含多个元素，如果在单击任何其他菜单项时打开，我想要折叠。以下是我到目前为止的情况：

＆＃13;

<head>
  <meta charset="utf-8">
  <title>Test</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- Master CSS -->
  <link rel="stylesheet" href="master.css">
  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <!-- Bootstrap JS  -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="wrapper">
    <nav class="sidebar" id="sidebar-id">
      <ul class="list-unstyled nav components">
        <li class="active"><a href="#"><i class="glyphicon glyphicon-home"></i>Home</a></li>
        <li>
          <a href="#aboutSubmenu" data-toggle="collapse" aria-expanded="false"><i class="glyphicon glyphicon-briefcase"></i>About</a>
          <ul class="collapse list-unstyled" id="aboutSubmenu">
            <li><a href="#">Pages 1</a></li>
            <li><a href="#">Pages 2</a></li>
            <li><a href="#">Pages 3</a></li>
          </ul>
        </li>

        <li>
          <a href="#pagesSubmenu" data-toggle="collapse" aria-expanded="false"><i class="glyphicon glyphicon-duplicate"></i>Pages</a>
          <ul class="collapse list-unstyled" id="pagesSubmenu">
            <li><a href="#">Pages 1</a></li>
            <li><a href="#">Pages 2</a></li>
            <li><a href="#">Pages 3</a></li>
          </ul>
        </li>

        <li><a href="#"><i class="glyphicon glyphicon-link"></i> Portfolio</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-send"></i>Contact</a></li>
      </ul>
    </nav>
    <!-- end sidebar -->
</body>

＆＃13;

正如您所看到的那样，当您点击＆＃39;关于＆＃39;或者＆＃39;页面＆＃39;它们的下拉列表会打开，但除非您再次单击特定标题，否则它们不会关闭。我希望任何打开的下拉菜单关闭，除非你点击下拉列表标题，在这种情况下，所有下拉列表都将关闭，然后正确的下拉列表将打开。

Answer 1

您可以使用解决方案

$('a').click(function(){
  if(!$(this).next('ul').hasClass('in')) {
    $('.collapse').each(function(){
      $(this).removeClass('in');
    });
  }
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<div class="wrapper">
<nav class="sidebar" id="sidebar-id">
  <ul class="list-unstyled nav components">
    <li class="active"><a href="#"><i class="glyphicon glyphicon-home"></i>Home</a></li>
    <li>
      <a href="#aboutSubmenu" data-toggle="collapse" aria-expanded="false"><i class="glyphicon glyphicon-briefcase"></i>About</a>
      <ul class="collapse list-unstyled" id="aboutSubmenu">
        <li><a href="#">Pages 1</a></li>
        <li><a href="#">Pages 2</a></li>
        <li><a href="#">Pages 3</a></li>
      </ul>
    </li>

    <li>
      <a href="#pagesSubmenu" data-toggle="collapse" aria-expanded="false"><i class="glyphicon glyphicon-duplicate"></i>Pages</a>
      <ul class="collapse list-unstyled" id="pagesSubmenu">
        <li><a href="#">Pages 1</a></li>
        <li><a href="#">Pages 2</a></li>
        <li><a href="#">Pages 3</a></li>
      </ul>
    </li>

    <li><a href="#"><i class="glyphicon glyphicon-link"></i> Portfolio</a></li>
    <li><a href="#"><i class="glyphicon glyphicon-send"></i>Contact</a></li>
  </ul>
</nav>

希望这会对你有所帮助。

下拉菜单没有关闭其他项目点击

1 个答案: