javascript - 更改导航栏中的图标折叠引导程序
问题描述
我有一个导航栏,它的 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 中添加什么来显示正确的图标?
解决方案
这很容易做到。根据我从您的问题中了解到的情况,当下拉菜单打开时,您如何将“+”图标更改为“-”,然后再将其更改回来,但您无法将其更改回来。如果是这样的话,但首先因为我不知道 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
}
推荐阅读
- vue.js - Nuxt modules state
- python - 在python中重新编号列表成员
- mysql - Every derived table must have its own alias, i dont know how to fix
- python - Selenium WebDriver 等待不适用于 cookie 策略窗口的预期条件
- eclipse - 如何禁用 Eclipse 派生标记
- angular - 在外部 JavaScript 库中定义函数时如何检查未定义?(Angular4/5)
- python - 如何使用两条单独计算的线为 seaborn 线图创建图例
- postgresql - 如何防止 Postgres 在并发单行 upserts 上死锁?
- vba - 如何使用带有字符串值的 Threading.Thread.Sleep
- r - [R 包]ubuntu 18.04 安装 R 包时遇到问题(“预测”)