Question

当单击特定菜单项时，如何使用导航栏自动折叠所有菜单？

例如，查看此站点： https://blackrockdigital.github.io/startbootstrap-sb-admin-2/pages/index.html

当我单击“ UI元素”并展开此菜单，然后单击另一个“多级下拉菜单”以展开它时，“ UI元素”菜单同时关闭。

我正在使用引导主题AppStack中的导航栏菜单，但它没有此功能。

下面是我的代码示例。我想单击GDTA，如果GTMAR已打开，则将其关闭。当我单击“确定”时

    <nav class="sidebar">
        <div class="sidebar-content ">
            <a class="sidebar-brand" href="index.html">
              <img src="img/user.png" alt="Spider" class="align-middle img-fluid rounded-circle" width="32" height="32" />
              <span class="align-middle ml-2" style="font-size:32px;">Spider</span>
            </a>

            <ul class="sidebar-nav">
                <li class="sidebar-header">
                    Bases
                </li>
                <li class="sidebar-item">
                    <a href="#dashboards" data-toggle="collapse" class="sidebar-link collapsed">
                      <!-- <i class="align-middle" data-feather="layers"></i>  map layers home briefcase-->
                      <i class="fas fa-ship"></i><span class="align-middle">GTMAR</span>
                      <!-- coloca Pills   <span class="sidebar-badge badge badge-secondary">12/24</span>   -->
                    </a>
                    <ul id="dashboards" class="sidebar-dropdown list-unstyled collapse">
                        <li class="sidebar-item"><a class="sidebar-link" href="index.html">Casos</a></li>
                        <li class="sidebar-item"><a class="sidebar-link" href="dashboard-analytics.html">Pessoas</a></li>
                        <li class="sidebar-item"><a class="sidebar-link" href="dashboard-e-commerce.html">Ocorrências</a></li>
                        <li class="sidebar-item"><a class="sidebar-link" href="dashboard-social.html">Organizações</a></li>
                        <li class="sidebar-item"><a class="sidebar-link" href="dashboard-crypto.html">Aeronave <span class="sidebar-badge badge badge-primary">Novo</span></a></li>
                    </ul>
                </li>
                <li class="sidebar-item">
                    <a href="#layouts" data-toggle="collapse" class="sidebar-link collapsed">
                      <!--<i class="align-middle" data-feather="monitor"></i>  -->
                      <i class="fas fa-plane"></i><span class="align-middle">GDTA</span>
                    </a>
                    <ul id="layouts" class="sidebar-dropdown list-unstyled collapse show">
                        <li class="sidebar-item">
                            <a href="#entidades" data-toggle="collapse" class="sidebar-link collapsed">
                                <i class="fas fa-project-diagram"></i>Entidades</a>
                            <ul id="entidades" class="sidebar-dropdown list-unstyled collapse ">
                                <li class="sidebar-item"><a class="sidebar-link" href="index.html">Casos</a></li>
                                <li class="sidebar-item"><a class="sidebar-link" href="dashboard-analytics.html">Pessoas</a></li>
                                <li class="sidebar-item"><a class="sidebar-link" href="dashboard-e-commerce.html">Ocorrências</a></li>
                                <li class="sidebar-item"><a class="sidebar-link" href="dashboard-social.html">Organizações</a></li>
                                <li class="sidebar-item"><a class="sidebar-link" href="dashboard-crypto.html">Aeronave <span class="sidebar-badge badge badge-danger">Atenção</span></a></li>
                            </ul>                                
                        </li>
                        <li class="sidebar-item">
                            <a href="#documentos" data-toggle="collapse" class="sidebar-link collapsed">
                                <i class="fa fa-fw fa-file-alt"></i>Documentos<span class="sidebar-badge badge badge-secondary">12/24</span></a>
                            <ul id="documentos" class="sidebar-dropdown list-unstyled collapse ">
                                <li class="sidebar-item"><a class="sidebar-link" href="index.html">Relatório de Inteligência</a></li>
                                <li class="sidebar-item"><a class="sidebar-link" href="dashboard-analytics.html">Informação de Inteligência</a></li>
                                <li class="sidebar-item"><a class="sidebar-link" href="dashboard-e-commerce.html">Pedido de Informação</a></li>
                            </ul>                                
                    </ul>
                </li>
            </ul>
        </div>
    </nav>

Answer 1

首先您要了解show类，它的工作原理〜

当您单击anchor tag <a>的同级兄弟<ul>添加显示类别时，该类别会折叠。

现在，我编写了jQuery（HTML中没有任何变化）

说明

每当您单击anchor tag时，我都会检查show类，如果它存在，我什么都不做，但是只要您单击第二个anchor标签并且它具有显示类，我删除它。

$('.sidebar-link').click(function(event) {
  var sidebar = $(this).siblings('ul').hasClass('show');
  if (!sidebar) {
    $('.sidebar-dropdown').removeClass('show');
  }
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<nav class="sidebar">
  <div class="sidebar-content ">
    <a class="sidebar-brand" href="index.html">
      <img src="img/user.png" alt="Spider" class="align-middle img-fluid rounded-circle" width="32" height="32" />
      <span class="align-middle ml-2" style="font-size:32px;">Spider</span>
    </a>

    <ul class="sidebar-nav">
      <li class="sidebar-header">
        Bases
      </li>
      <li class="sidebar-item">
        <a href="#dashboards" data-toggle="collapse" class="sidebar-link collapsed">
          <!-- <i class="align-middle" data-feather="layers"></i>  map layers home briefcase-->
          <i class="fas fa-ship"></i><span class="align-middle">GTMAR</span>
          <!-- coloca Pills   <span class="sidebar-badge badge badge-secondary">12/24</span>   -->
        </a>
        <ul id="dashboards" class="sidebar-dropdown list-unstyled collapse">
          <li class="sidebar-item"><a class="sidebar-link" href="index.html">Casos</a></li>
          <li class="sidebar-item"><a class="sidebar-link" href="dashboard-analytics.html">Pessoas</a></li>
          <li class="sidebar-item"><a class="sidebar-link" href="dashboard-e-commerce.html">Ocorrências</a></li>
          <li class="sidebar-item"><a class="sidebar-link" href="dashboard-social.html">Organizações</a></li>
          <li class="sidebar-item"><a class="sidebar-link" href="dashboard-crypto.html">Aeronave <span class="sidebar-badge badge badge-primary">Novo</span></a></li>
        </ul>
      </li>
      <li class="sidebar-item">
        <a href="#layouts" data-toggle="collapse" class="sidebar-link collapsed">
          <!--<i class="align-middle" data-feather="monitor"></i>  -->
          <i class="fas fa-plane"></i><span class="align-middle">GDTA</span>
        </a>
        <ul id="layouts" class="sidebar-dropdown list-unstyled collapse show">
          <li class="sidebar-item">
            <a href="#entidades" data-toggle="collapse" class="sidebar-link collapsed">
              <i class="fas fa-project-diagram"></i>Entidades
            </a>
            <ul id="entidades" class="sidebar-dropdown list-unstyled collapse ">
              <li class="sidebar-item"><a class="sidebar-link" href="index.html">Casos</a></li>
              <li class="sidebar-item"><a class="sidebar-link" href="dashboard-analytics.html">Pessoas</a></li>
              <li class="sidebar-item"><a class="sidebar-link" href="dashboard-e-commerce.html">Ocorrências</a></li>
              <li class="sidebar-item"><a class="sidebar-link" href="dashboard-social.html">Organizações</a></li>
              <li class="sidebar-item"><a class="sidebar-link" href="dashboard-crypto.html">Aeronave <span class="sidebar-badge badge badge-danger">Atenção</span></a></li>
            </ul>                                
          </li>
          <li class="sidebar-item">
            <a href="#documentos" data-toggle="collapse" class="sidebar-link collapsed">
              <i class="fa fa-fw fa-file-alt"></i>Documentos<span class="sidebar-badge badge badge-secondary">12/24</span>
            </a>
            <ul id="documentos" class="sidebar-dropdown list-unstyled collapse ">
              <li class="sidebar-item"><a class="sidebar-link" href="index.html">Relatório de Inteligência</a></li>
              <li class="sidebar-item"><a class="sidebar-link" href="dashboard-analytics.html">Informação de Inteligência</a></li>
              <li class="sidebar-item"><a class="sidebar-link" href="dashboard-e-commerce.html">Pedido de Informação</a></li>
            </ul>     
          </li>                           
        </ul>
      </li>
    </ul>
  </div>
</nav>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

bootstrap 4.1导航栏折叠导航第二级和导航第三级

1 个答案: