Несколько недель назад я пытался найти решение, позволяющее использовать выпадающее меню начальной загрузки 4 с панелью +/- на небольших устройствах. С помощью здесь все было улажено. Но у меня есть небольшая хитрость.
У каждой ссылки в верхней навигации должна быть своя страница. Так что ниже у меня есть "О нас". На полноразмерном экране я хочу открыть поднавигатор «при наведении» и при нажатии «О нас» получить страницу «О нас». На маленьких экранах я хочу, чтобы знак «+» и «-» отображался в конце «О нас», и когда вы нажимаете «+», он должен открывать субнавигатор, но когда вы нажимаете «О нас», то он должен показывать страницу «О нас».
Я заметил, что если я добавлю href в «About Us», то это будет проигнорировано. Похоже, что он игнорируется из-за переключения данных в теге <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>