javascript - 带有子菜单的可折叠垂直侧边栏菜单图标

标签 javascript html css twitter-bootstrap

可折叠的侧边栏菜单，我在其中寻找加号 (+) 来切换为减号 (-)。当侧边栏菜单打开并切换时，相同的操作再次发生。

从文档和社区代码资源中，我可以切换折叠菜单，但我正在寻找右侧加号 (+) 图标也从加号 (+) 更改为减号 (-)图标

我使用了 Bootstrap 图标，对于加号和破折号，分别使用了以下类 <i class="bi bi-plus"></i> , <i class="bi bi-dash"></i> 

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

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

      element.addEventListener('click', function(e) {

        let nextEl = element.nextElementSibling;
        let parentEl = element.parentElement;

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

          if (nextEl.classList.contains('show')) {
            sidebarNavCollapse.hide();
          } else {
            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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0c6e6363787f787e6d7c21656f63627f4c3d223d3c223f" rel="noreferrer noopener nofollow">[email protected]</a>/font/bootstrap-icons.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3b5954544f484f495a4b7b0e150b1509" rel="noreferrer noopener nofollow">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4b2924243f383f392a3b0b7e657b6579" rel="noreferrer noopener nofollow">[email protected]</a>/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>

最佳答案

纯 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 将折叠的类添加到导航链接。我们可以使用该类来显示或隐藏第一个和最后一个图标。

CSS:

.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;
}


.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;
}

/* original style */

.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;
}
<aside class="g-aside">
  <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 has-submenu">
          <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">

            <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 collapsed" href="#ivr" data-bs-toggle="collapse">
            <i class="bi bi-box-fill"></i>
            <p>IVR
              <i class="bi bi-plus"></i>
              <i class="bi bi-dash"></i>
            </p>
          </a>
          <ul class="submenu collapse" id="ivr">
            <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>

        <!-- other menus not shown -->


      </ul>
    </nav>
  </div>
</aside>


<link href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e7858888939493958697ca8e84888994a7d6c9d6d7c9d4" rel="noreferrer noopener nofollow">[email protected]</a>/font/bootstrap-icons.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d8bab7b7acabacaab9a898edf6e8f6ea" rel="noreferrer noopener nofollow">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a5c7cacad1d6d1d7c4d5e5908b958b97" rel="noreferrer noopener nofollow">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />

关于javascript - 带有子菜单的可折叠垂直侧边栏菜单图标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/74993080/

上一篇：class - 创建 Eq 实例并进行计算

下一篇：Excel增加公式内单元格的行数

相关文章：

javascript - FileSystemHandle.requestPermission DOMException : User activation is required to request permissions

javascript - Javascript 中的回调在幕后是如何编码的？

php - 将一个表的选定下拉值插入另一表

html - 无法摆脱自定义滚动条和 DIV 之间的额外空间

javascript - 尝试使用 jquery 和 ajax 填充下拉列表

javascript - websocket 客户端在快速调用 socket.send() 时间歇性无法传输

javascript - 我只需要将复选框的名称转移到某些像素顶部而不是复选框

javascript - 以正确的方式禁用 Angular 5 输入字段

html - css 和 html 的链接问题

html - 推送 ul li 的每个子级别

©2024 IT工具网  联系我们