我有一个导航栏,它的 sm 大小有一个问题
我为折叠下拉菜单添加了一个图标
当我点击一个下拉菜单时,它会打开并且图标是“-”,当再次点击同一个下拉菜单时,图标是“+”并且完美运行。
当我点击一个下拉菜单时,它会打开并且图标是“-” 当它打开并单击另一个下拉菜单时,上一个下拉列表将关闭但上一个图标仍然“-”
这是我的代码
<nav class="navbar navbar-expand-md nav_t fixed-top pt-2 navbar-fixed-top" id="navbar">
<div class="container ">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item dropdown ">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown">
home
</a>
</li>
<li class="nav-item dropdown px-md-5">
<a class="nav-link dropdown-toggle sm_display"
href="https://getbootstrap.com/docs/5.0/components/navbar/" id="navbarDropdown"
role="button" data-toggle="" aria-haspopup="true" aria-expanded="false">
articles
</a>
<a class="nav-link dropdown-toggle d-md-none d-sm-inline float-left plus_icon maqale" href="#"
id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<i class="fa fa-plus-square " id=""></i>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href=""> 1</a>
<a class="dropdown-item" href=""> 2</a>
<a class="dropdown-item" href=""> 3</a>
</div>
</li>
<li class="nav-item dropdown ">
<a class="nav-link dropdown-toggle sm_display " href="https://getbootstrap.com/docs/5.0/components/navbar/" id="navbarDropdown" role="" data-toggle=""
aria-haspopup="true" aria-expanded="false">
courses
</a>
<a class="nav-link dropdown-toggle d-md-none d-sm-inline float-left plus_icon maqale" href="#"
id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<i class="fa fa-plus-square " id=""></i>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href=""> 1</a>
<a class="dropdown-item" href=""> 2</a>
<a class="dropdown-item" href=""> 3</a>
</div>
</li>
<li class="nav-item dropdown px-md-5 ">
<a class="nav-link dropdown-toggle sm_display " href="https://getbootstrap.com/docs/5.0/components/navbar/" id="navbarDropdown" role="" data-toggle=""
aria-haspopup="true" aria-expanded="false">
news
</a>
<a class="nav-link dropdown-toggle d-md-none d-sm-inline float-left plus_icon maqale" href="#"
id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<i class="fa fa-plus-square " id=""></i>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href=""> 1</a>
<a class="dropdown-item" href=""> 2</a>
<a class="dropdown-item" href=""> 3</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
这是javascript
$(".plus_icon").click(function () {
$(this).children(".fa").toggleClass("fa-plus-square");
$(this).children(".fa").toggleClass("fa-minus-square");
});
我应该向 javascript 添加什么来显示当前图标?
答案 0 :(得分:0)
这很容易做到。从我从您的问题中了解到的是,当下拉菜单打开时,您可以将“+”图标更改为“-”,然后再次将其更改回来,但您无法将其更改回来。 如果是这种情况,但首先因为我不知道 jQuery,所以我将在 vanilla JavaScript 中给出答案。所以你可以做的是当下拉菜单被点击时,你会说:
// change the variable names
if(dropdown.classlist.contains("opened")){
dropdown.classList.remove("opened");
}else {
dropdown.classList.add("opened")
}
现在添加一些 JavaScript 来检查下拉列表是否包含类并相应地更改图标。例如
if(dropdown.classlist.contains("opened")){
// change the icon
//remove the class
}else {
// change the icon
//add the class
}