我是Bootstrap 4的新手。我有一个带有下拉项目的导航菜单。它有标准的Bootstrap插入符号,它会自动添加。
现在,我打算在打开导航项的下拉菜单后将方向更改为“向上”。我已经搜索了整个互联网以及更远的地方但是找不到Bootstrap 4 的工作解决方案,而没有使用font-awesome或变通方法。
这是菜单的HTML代码(工作正常),包括下拉项目(第2项):
<nav class="navbar navbar-expand-sm navbar-light">
<a class="navbar-brand" href="#"><img src="img/logo.svg" width="80" height="80" alt="Logo"></a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Item 1<span class="sr-only">(current)</span></a>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" data-toggle="dropdown">Item 2</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Item 2.1</a>
<a class="dropdown-item" href="#">Item 2.2</a>
<a class="dropdown-item" href="#">Item 2.3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Item 2.4</a>
</div>
</li>
<a class="nav-item nav-link" href="#">Item 3</a>
<a class="nav-item nav-link" href="#">Item 4</a>
</div>
</div>
</nav>
CSS或jQuery解决方案是可以的,只要它不是一种解决方法,而是一个漂亮,干净的Bootstrap解决方案。应该可以吧?
那么,在打开下拉项目时,谁可以帮我改变插入方向从下到上?最终用漂亮的动画。提前谢谢!
答案 0 :(得分:3)
您可以像这样旋转它:
.dropdown-toggle[aria-expanded="true"]:after {
transform: rotate(180deg);
}
/*for the animation*/
.dropdown-toggle:after {
transition: 0.5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-sm navbar-light">
<a class="navbar-brand" href="#"><img src="img/logo.svg" width="80" height="80" alt="Logo"></a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Item 1<span class="sr-only">(current)</span></a>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" data-toggle="dropdown">Item 2</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Item 2.1</a>
<a class="dropdown-item" href="#">Item 2.2</a>
<a class="dropdown-item" href="#">Item 2.3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Item 2.4</a>
</div>
</li>
<a class="nav-item nav-link" href="#">Item 3</a>
<a class="nav-item nav-link" href="#">Item 4</a>
</div>
</div>
</nav>