bootstrap 4.1 navbar-collapse nav-second-level 和 nav-third-level

Posted 2023-03-24

技术标签:

【中文标题】bootstrap 4.1 navbar-collapse nav-second-level 和 nav-third-level【英文标题】：bootstrap 4.1 navbar-collapse nav-second-level and nav-third-level 【发布时间】：2019-06-18 14:37:00 【问题描述】：

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

例如，看看这个网站： https://blackrockdigital.github.io/startbootstrap-sb-admin-2/pages/index.html

当我点击“UI Elements”并展开这个菜单，然后我点击另一个“Multi-Level dropdown”菜单来展开它时，“UI Elements”菜单同时关闭。

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

下面是我的代码示例。我想点击 GDTA on，如果 GTMAR 已打开，请关闭它。当我点击确定时做同样的事情

    <nav class="sidebar">
        <div class="sidebar-content ">
            <a class="sidebar-brand" href="index.html">
              <img src="img/user.png"  class="align-middle img-fluid rounded-circle"   />
              <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>

【问题讨论】：

【参考方案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"  class="align-middle img-fluid rounded-circle"   />
      <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 navbar-collapse nav-second-level 和 nav-third-level的主要内容，如果未能解决你的问题，请参考以下文章

如何在 Bootstrap 4.1 中悬停时创建下拉子菜单？

如何使用 Bootstrap v3.4.1 设置禁用（也选中）单选按钮的样式？

单击并处于活动状态时更改 Bootstrap 4.1 .btn-outline-primary 背景？

如何在 Bootstrap 4.1 中悬停时将子菜单下拉项向右移动？

php Wordpress Bootstrap 4.1分页（使用自定义WP_Query（）和全局$ wp_query支持）