几周前，我试图找到一种解决方案，在小型设备上安装带有+/-的bootstrap 4 navbar Dropdown。有了这里的帮助，一切都得以解决。但是我有一个棘手的问题。
顶部导航中的每个链接应具有其自己的页面。因此，下面有“关于我们”。在完整尺寸的屏幕上，我想打开“悬停时”子导航，然后单击“关于我们”时，获得“关于我们”页面。在小屏幕上，我希望在“关于我们”末尾显示+和-，并且当您单击+时应打开子导航，但是当您单击“关于我们”时它应显示“关于我们”页面。
我注意到，如果我在“关于我们”中添加href，那么这将被忽略。由于<a>标签中的数据切换，它似乎被忽略了。如果我将其删除，则它可以正常工作，但显然现在单击加号不会打开子导航，而是转到“关于我们”，这很有意义，因为加号是a标签的一部分。
通常如何实现？适当的行为应该是什么？我希望有人能指出我正确的方向。先感谢您。
.dropdown-toggle[data-toggle="dropdown"]:after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f067";
}
.show > .dropdown-toggle[data-toggle="dropdown"]:after {
content: "\f068";
}
.dropdown-toggle[data-toggle="dropdown"] {
display: flex;
}
.dropdown-toggle[data-toggle="dropdown"]:after {
border: none;
}
/*
* I inflated [data-toggle]'s specificity by adding .dropdown-toggle to it as for
* some reason SO is loading bootstrap.min.css after the custom CSS
* but you can use the CSS I posted in the answer if it's loaded after bootstrap.css
* see it here: https://jsfiddle.net/websiter/wy46msvh/
*/<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet"/>
<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.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<!-- Navbar Top -->
<nav class="navbar navbar-expand-md navbar-custom navbar-light">
<div class="container justify-content-between">
<!-- Toggler/collapsibe Button Menu -->
<button class="navbar-toggler mr-auto" type="button" data-toggle="collapse" data-target="#collapsibleNavbarMenu">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbarMenu">
<ul class="navbar-nav">
<!-- Link -->
<li class="nav-item">
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<!-- Dropdown About Us-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href id="navbardrop" data-toggle="dropdown">
<i class="fab fa-jenkins d-lg-none d-xl-none" aria-hidden="true"></i> About
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
答案 0 :(得分：0)
请在摘要下方进行检查。我对样式做了一些更改。检查您的要求是否满足。
.dropdown-toggle[data-toggle="dropdown"]:after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f067";
}
.show > .dropdown-toggle[data-toggle="dropdown"]:after {
content: "\f068";
}
.dropdown-toggle[data-toggle="dropdown"] {
display: flex;
}
.dropdown-toggle[data-toggle="dropdown"]:after {
border: none;
}
.dropdown-toggle[data-toggle="dropdown"]:after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "";
}
.show > .dropdown-toggle[data-toggle="dropdown"]:after {
content: "";
}
.dropdown-menu.show {
display: none !important;
}
li.nav-item.dropdown:hover > div.dropdown-menu {
display: block !important;
}
@media only screen and (max-width: 600px) {
.dropdown-toggle[data-toggle="dropdown"]:after {
border: none;
}
.dropdown-toggle[data-toggle="dropdown"]:after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f067";
}
.dropdown-toggle::after {
display: inline-block;
margin-left: .255em;
vertical-align: .255em;
content: "";
border-top: .3em solid;
border-right: .3em solid transparent;
border-bottom: 0;
border-left: .3em solid transparent;
}
li.nav-item.dropdown:hover > div.dropdown-menu {
visibility: hidden;
}
.dropdown-menu.show {
display: block !important;
visibility: visible !important;
}
.show > .dropdown-toggle[data-toggle="dropdown"]:after {
content: "\f068"
}
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet" />
<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.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<!-- Navbar Top -->
<nav class="navbar navbar-expand-md navbar-custom navbar-light">
<div class="container justify-content-between">
<!-- Toggler/collapsibe Button Menu -->
<button class="navbar-toggler mr-auto" type="button" data-toggle="collapse" data-target="#collapsibleNavbarMenu">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbarMenu">
<ul class="navbar-nav">
<!-- Link -->
<li class="nav-item">
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<!-- Dropdown About Us-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbardrop" data-toggle="dropdown">
<i class="fab fa-jenkins d-lg-none d-xl-none" aria-hidden="true"></i> About
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">About Us</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</div>
</nav>