更改导航栏中的图标折叠引导程序

Question

我有一个导航栏，但它的 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 中添加什么来显示正确的图标？

Answer 1

这很容易做到。根据我从您的问题中了解到的情况，当下拉菜单打开时，您如何将“+”图标更改为“-”，然后再次将其更改回来，但您无法将其更改回来。 如果是这样的话，但首先因为我不知道 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
}