时间戳

首页 > 解决方案 > Bootstrap4 菜单项保持选中状态，只能点击一次

html - Bootstrap4 菜单项保持选中状态，只能点击一次

问题描述

我目前遇到了 bootstrap 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-->

标签： htmldrop-down-menutabsbootstrap-4navbar

解决方案

您需要覆盖一些引导样式定义来实现这一点。

  • 首先将类 'nav' 和 'nav-tabs' 添加到 'dropdown-menu'

  • 然后添加以下css，

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

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

小提琴：http: //jsfiddle.net/grrakesh4769/aq9Laaew/191335/

推荐阅读