bootstrap 4.1 navbar-collapse nav-второго уровня и nav-третьего уровня - PullRequest
Новая
       22

bootstrap 4.1 navbar-collapse nav-второго уровня и nav-третьего уровня

0 голосов
/ 24 января 2019

Как я могу использовать навигационную панель для автоматического свертывания всех меню, когда я нажимаю на определенный пункт меню?

Например, посмотрите на этот сайт: https://blackrockdigital.github.io/startbootstrap-sb-admin-2/pages/index.html

Когда я нажимаю в«Элементы пользовательского интерфейса» и разверните это меню, а затем я щелкаю в другом «Многоуровневом раскрывающемся меню», чтобы развернуть его, меню «Элементы пользовательского интерфейса» закрывается одновременно.

Я используюМеню навигационной панели из темы начальной загрузки, 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>

1 Ответ

0 голосов
/ 24 января 2019

Прежде всего вы знаете о show классе, как он работает ~

, когда вы нажимаете anchor tag <a> их брат <ul>, добавляете шоу-класс и для этого он рухнул.

Теперь я написал jQuery (в HTML ничего не меняется)

Объяснение

всякий раз, когда вы нажимаете anchor tag, я проверяюshow class, и если он существует, я ничего не делаю, но всякий раз, когда вы нажимаете на второй тег anchor, и у него есть класс show, я удаляю его. 

$('.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>
...