• • 仅CSS解决方案**

如果你按照Bootstrap documentation所示连接菜单，那么你就不需要自定义JavaScript，只需要使用css就可以切换图标。要做到这一点，我们只需要添加一个data-bs-toggle属性，一个id和一个href。比较下面的原始代码和修改后的代码，了解每个可折叠菜单必须做的修改。

• • 原件：**

<a class="nav-link">
    <i class="bi bi-columns-gap"></i>
    <p>Dashboard
      <i class="bi bi-plus"></i>
    </p>
  </a>
  <ul class="submenu collapse">
  ...

• • 修改日期：**

<a class="nav-link collapsed" href="#dashboard" data-bs-toggle="collapse">
    <i class="bi bi-columns-gap"></i>
    <p>Dashboard
      <i class="bi bi-plus"></i>
      <i class="bi bi-dash"></i>
    </p>
  </a>
  <ul class="submenu collapse" id="dashboard">
  ...

当一个菜单打开时，Bootstrap会将折叠的类添加到导航链接中，我们可以使用该类来显示或隐藏第一个和最后一个图标。

• • 中央支助组：**

.nav-link.collapsed i:first-child {
  display: inline;
}

.nav-link:not(.collapsed) i:first-child {
  display: none;
}

.nav-link.collapsed i:last-child {
  display: none;
}

.nav-link:not(.collapsed) i:last-child {
  display: inline;
}

一个三个三个一个

尝试查询bi-plus，如果不起作用，则查询bi-dash并标记self。然后可以删除所有破折号并替换为加号，并根据flag添加加号或破折号

;
(function() {
  document.addEventListener("DOMContentLoaded", function() {

    document.querySelectorAll('.g-sidebar .nav-link').forEach(function(element) {

      element.addEventListener('click', function(e) {
        let self=false

        let nextEl = element.nextElementSibling;
        let parentEl = element.parentElement;
        let childImg = element.querySelector('.bi-plus');
        if(!childImg){
            self = true;
            childImg = element.querySelector('.bi-dash');
        }

        if (nextEl) {
          e.preventDefault();
          let sidebarNavCollapse = new bootstrap.Collapse(nextEl);

          if (nextEl.classList.contains('show')) {
            sidebarNavCollapse.hide();
          } else {
            document.querySelectorAll('.nav-link .bi-dash').forEach(function(elem){
              if (elem!==childImg) {
                elem.classList.add('bi-plus')
                elem.classList.remove('bi-dash')
              }
            })
            if(!self){
              childImg.classList.remove('bi-plus')
              childImg.classList.add('bi-dash')
            } else {
              childImg.classList.remove('bi-dash')
              childImg.classList.add('bi-plus')
            }
            sidebarNavCollapse.show();
            // find other submenus with class=show
            let opened_submenu = parentEl.parentElement.querySelector('.submenu.show');
            // if it exists, then close all of them
            if (opened_submenu) {
              new bootstrap.Collapse(opened_submenu);
            }

          }
        }

      });
    })

  });
})();

.g-aside {
  background-color: #8c8c8c;
  width: 260px;
}

.nav {
  --bs-nav-link-padding-x: 1rem;
  --bs-nav-link-padding-y: 0.5rem;
  --bs-nav-link-color: var(--bs-link-color);
  --bs-nav-link-hover-color: var(--bs-link-hover-color);
  --bs-nav-link-disabled-color: #6c757d;
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.submenu>li {
  list-style: none;
}

.g-sidebar .nav-link {
  position: relative;
  display: flex;
  font-family: quicksand, sans-serif;
  color: #fff;
  width: calc(260px - 1rem);
  transition: width .3s ease-in-out;
  list-style: none!;
}

.g-sidebar .nav-link p {
  margin-bottom: 0;
  padding-left: 1.4rem;
  display: inline-block;
}

.g-sidebar .nav-link p i,
.g-sidebar .nav-link p span {
  right: 1rem;
  position: absolute;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<aside class="g-aside">
  <!--Sidebar Area-->
  <div class="g-sidebar-area">
    <nav class="g-sidebar py-2 mb-4">
      <ul class="nav flex-column" id="nav_accordion">

        <li class="nav-item">
          <a class="nav-link" href="#">
            <i class="bi bi-person-fill"></i>
            <p>Agents</p>
          </a>
        </li>
        <li class="nav-item has-submenu">
          <a class="nav-link" href="#">
            <i class="bi bi-columns-gap"></i>
            <p>Dashboard <i class="bi bi-plus"></i></p>
          </a>
          <ul class="submenu collapse">

            <li>
              <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
                <p>Submenu item 1</p>
              </a>
            </li>
            <li>
              <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
                <p>Submenu item 1</p>
              </a>
            </li>
            <li>
              <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
                <p>Submenu item 1</p>
              </a>
            </li>
            <li>
              <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
                <p>Submenu item 1</p>
              </a>
            </li>
          </ul>
        </li>
        <li class="nav-item has-submenu">
          <a class="nav-link" href="#">
            <i class="bi bi-box-fill"></i>
            <p>IVR <i class="bi bi-plus"></i></p>
          </a>
          <ul class="submenu collapse">
            <li>
              <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
                <p>Submenu item 1</p>
              </a>
            </li>
            <li>
              <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
                <p>Submenu item 1</p>
              </a>
            </li>
            <li>
              <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
                <p>Submenu item 1</p>
              </a>
            </li>
            <li>
              <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
                <p>Submenu item 1</p>
              </a>
            </li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <i class="bi bi-grid-1x2-fill"></i>
            <p>Page <span class="badge bg-primary">12</span></p>
          </a>
        </li>
        <!--                    <li class="ms-3 mt-3">PROMOTION</li>-->
        <li class="nav-item has-submenu">
          <a class="nav-link" href="#">
            <i class="bi bi-record-btn-fill"></i>
            <p>Campaign <i class="bi bi-plus"></i></p>
          </a>
          <ul class="submenu collapse">
            <li>
              <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
                <p>Submenu item 1</p>
              </a>
            </li>
            <li>
              <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
                <p>Submenu item 1</p>
              </a>
            </li>
            <li>
              <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
                <p>Submenu item 1</p>
              </a>
            </li>
            <li>
              <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
                <p>Submenu item 1</p>
              </a>
            </li>
          </ul>
        </li>
        <li class="nav-item has-submenu">
          <a class="nav-link" href="#">
            <i class="bi bi-file-earmark-text-fill"></i>
            <p>Report <i class="bi bi-plus"></i></p>
          </a>
          <ul class="submenu collapse">
            <li>
              <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
                <p>Submenu item 1</p>
              </a>
            </li>
            <li>
              <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
                <p>Submenu item 1</p>
              </a>
            </li>
            <li>
              <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
                <p>Submenu item 1</p>
              </a>
            </li>
            <li>
              <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
                <p>Submenu item 1</p>
              </a>
            </li>
          </ul>
        </li>
        <li class="nav-item has-submenu">
          <a class="nav-link" href="#">
            <i class="bi bi-file-plus-fill"></i>
            <p>New Report <i class="bi bi-plus"></i></p>
          </a>
          <ul class="submenu collapse">
            <li>
              <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
                <p>Submenu item 1</p>
              </a>
            </li>
            <li>
              <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
                <p>Submenu item 1</p>
              </a>
            </li>
            <li>
              <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
                <p>Submenu item 1</p>
              </a>
            </li>
            <li>
              <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
                <p>Submenu item 1</p>
              </a>
            </li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <i class="bi bi-record-btn-fill"></i>
            <p> Skill </p>
          </a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="#">
            <i class="bi bi-voicemail"></i>
            <p>Voice Mail </p>
          </a>
        </li>
        <li class="nav-item has-submenu">
          <a class="nav-link" href="#"><i class="bi bi-chat-right-text-fill"></i>
                            <p>Chat <i class="bi bi-plus"></i></p></a>
          <ul class="submenu collapse">
            <li>
              <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
                <p>Submenu item 1</p>
              </a>
            </li>
            <li>
              <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
                <p>Submenu item 1</p>
              </a>
            </li>
            <li>
              <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
                <p>Submenu item 1</p>
              </a>
            </li>
            <li>
              <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
                <p>Submenu item 1</p>
              </a>
            </li>
          </ul>
        </li>
        <li class="nav-item has-submenu">
          <a class="nav-link" href="#"><i class="bi bi-envelope-fill"></i>
                            <p>Email <i class="bi bi-plus"></i></p></a>
          <ul class="submenu collapse">
            <li>
              <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
                <p>Submenu item 1</p>
              </a>
            </li>
            <li>
              <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
                <p>Submenu item 1</p>
              </a>
            </li>
            <li>
              <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
                <p>Submenu item 1</p>
              </a>
            </li>
            <li>
              <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
                <p>Submenu item 1</p>
              </a>
            </li>
          </ul>
        </li>
        <li class="nav-item has-submenu">
          <a class="nav-link" href="#"><i class="bi bi-file-earmark-text-fill"></i>
                            <p>SMS <i class="bi bi-plus"></i></p></a>
          <ul class="submenu collapse">
            <li>
              <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
                <p>Submenu item 1</p>
              </a>
            </li>
            <li>
              <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
                <p>Submenu item 1</p>
              </a>
            </li>
            <li>
              <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
                <p>Submenu item 1</p>
              </a>
            </li>
            <li>
              <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
                <p>Submenu item 1</p>
              </a>
            </li>
          </ul>
        </li>

        <li class="nav-item has-submenu">
          <a class="nav-link" href="#">
            <i class="bi bi-window-stack"></i>
            <p>CRM <i class="bi bi-plus"></i></p>
          </a>
          <ul class="submenu collapse">
            <li>
              <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
                <p>Submenu item 1</p>
              </a>
            </li>
            <li>
              <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
                <p>Submenu item 1</p>
              </a>
            </li>
            <li>
              <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
                <p>Submenu item 1</p>
              </a>
            </li>
            <li>
              <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
                <p>Submenu item 1</p>
              </a>
            </li>
          </ul>
        </li>
        <li class="nav-item has-submenu">
          <a class="nav-link" href="#">
            <i class="bi bi-telephone-inbound-fill"></i>
            <p>CRM Inbound <i class="bi bi-plus"></i></p>
          </a>
          <ul class="submenu collapse">
            <li>
              <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
                <p>Submenu item 1</p>
              </a>
            </li>
            <li>
              <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
                <p>Submenu item 1</p>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>
</aside>