Пункт меню Bootstrap4 остается выбранным и активируется только один раз - PullRequest
Новая
       20

Пункт меню Bootstrap4 остается выбранным и активируется только один раз

0 голосов
/ 31 августа 2018

В настоящее время у меня проблема с начальной загрузкой 4 и навигацией, которая управляет вкладками. Само меню выглядит хорошо, но всякий раз, когда вы выбираете другую вкладку, оно остается выбранным, и вы не сможете выбрать его снова после перехода в другой раздел. Это означает, что после посещения всех ссылок вы никуда не сможете переместиться. Не уверен, что я что-то упустил или это вообще не должно быть использовано. 

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<nav class="navbar navbar-expand-sm sticky-top navbar-dark bg-dark py-0 mb-2">
  <!--APP NAV START-->
  <ul class="nav nav-tabs mr-2" role="tablist">
    <li class="nav-item dropdown">
      <i class="material-icons md-light md-sm" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color: white;">MENUE</i>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" id="nav-info-tab" data-toggle="tab" href="#nav-info" role="tab" aria-controls="nav-info" aria-selected="false">Info</a>
        <a class="dropdown-item" href="#" aria-selected="false" onclick="openExternal('http://jsfiddle.net/')">jsfiddle/</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" id="nav-sub-tab" data-toggle="tab" href="#nav-sub" role="tab" aria-controls="nav-follower" aria-selected="false">sub</a>
        <a class="dropdown-item" id="nav-subsub-tab" data-toggle="tab" href="#nav-subsub" role="tab" aria-controls="nav-donations" aria-selected="false">subsub</a>
        <a class="dropdown-item" id="nav-subsubsub-tab" data-toggle="tab" href="#nav-subsubsub" role="tab" aria-controls="nav-subscriber" aria-selected="false">subsubsub</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" id="nav-something-tab" data-toggle="tab" href="#nav-something" role="tab" aria-controls="nav-settings" aria-selected="false">something</a>
      </div>
    </li>
  </ul>
  <!--APP NAV END-->
  <div class="ml w-75 dragable">
    <p class="mb-0 text-white">Some Title</p>
  </div>
</nav>


<!--PARTIAL START-->
<div class="container-fluid">
  <div class="tab-content" id="nav-tabContent">
    <div class="tab-pane fade show active" id="nav-info" role="tabpanel" aria-labelledby="nav-info-tab">INFO</div>
    <div class="tab-pane fade" id="nav-sub" role="tabpanel" aria-labelledby="nav-sub-tab">SUB</div>
    <div class="tab-pane fade" id="nav-subsub" role="tabpanel" aria-labelledby="nav-subsub-tab">SUB SUB</div>
    <div class="tab-pane fade" id="nav-subsubsub" role="tabpanel" aria-labelledby="nav-subsubsub-tab">SUB SUB SUB</div>
    <div class="tab-pane fade" id="nav-something" role="tabpanel" aria-labelledby="nav-something-tab">SOMETHING</div>
  </div>
</div>
<!--PARTIAL END-->

1 Ответ

0 голосов
/ 31 августа 2018

Вам нужно переопределить некоторые определения стиля начальной загрузки, чтобы достичь этого.

  • Сначала добавьте классы 'nav' и 'nav-tabs' в 'выпадающее меню'

  • Затем добавьте следующий CSS, 

    .dropdown-menu {
  display : none !important;
}

.dropdown-menu.show {
 display : block !important;
}

Скрипка: http://jsfiddle.net/grrakesh4769/aq9Laaew/191335/

...