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添加什么来显示currect图标？

这很容易做到。我从你的问题中了解到，当下拉菜单打开时，你需要将“+”图标更改为“-”，然后再将其更改回来，但你无法将其更改回来。 如果是这样的话，但首先因为我不知道jQuery，我将用普通JavaScript给出答案。因此，当单击下拉列表时，您可以说：

//更改变量名
if（dropdown.classlist.contains（“opened”））{
下拉列表.classList.remove（“打开”）；
}否则{
下拉列表.classList.add（“打开”）
}

现在添加一些JavaScript来检查下拉列表是否包含该类，并相应地更改图标。例如

if（dropdown.classlist.contains（“opened”））{
//更改图标
//删除该类
}否则{
//更改图标
//添加类
}

谢谢，但它不适合javascript@mmad好的，让我试试你的代码then@mmad我尝试了一些其他的代码，它works@mmad下面是我编写的

函数doneTodo（e）{if（e.target.parentElement.classList.contains（“done”）{e.target.parentElement.classList.remove（“done”）；e.target.parentElement.querySelector（“.todoContent”）.style=“文本装饰：无；不透明度：1”}其他{e.target.parentElement.classList.add（“完成”）；e.target.parentElement.querySelector（.todoContent”）.style=“文本装饰：线条通过；不透明度：0.5”}

 $(".plus_icon").click(function () {
        $(this).children(".fa").toggleClass("fa-plus-square");
        $(this).children(".fa").toggleClass("fa-minus-square");
    });