[英]change icon in navbar collapse bootstrap
我有一個導航欄,它的 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,所以我會在原版 JavaScript 中給出答案。 所以你可以做的是當點擊下拉菜單時,你會說:
// change the variable names
if(dropdown.classlist.contains("opened")){
dropdown.classList.remove("opened");
}else {
dropdown.classList.add("opened")
}
現在添加一些 JavaScript 以檢查下拉菜單是否包含 class 並相應地更改圖標。 例如
if(dropdown.classlist.contains("opened")){
// change the icon
//remove the class
}else {
// change the icon
//add the class
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.