单击图标时切换菜单不会折叠

Question

我正在处理此 link“https://sampledemos.online/training/index.html”，其中切换功能不起作用。下面是我的编码。

<aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme">
          <div class="app-brand demo">
            <a href="index.html" class="app-brand-link">
              <img src="/training/images/logo.jpg">
            </a>

            <a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto">
                  <i class="bx bx-chevron-left bx-sm align-middle" onclick="openNav()"></i>
                </a>
          </div>

          <div class="menu-inner-shadow"></div>

          <ul class="menu-inner py-1">
            <!-- Dashboard -->
            <li class="menu-item active">
              <a href="index.html" class="menu-link">
                <i class="menu-icon tf-icons bx bx-home-circle"></i>
                <div data-i18n="course">Course Master</div>
              </a>
            </li>
            ...................
            </aside>
--------------------------------------------
            <script>
function openNav() {
        $(document).ready(function () {
        $('#layout-menu').toggleClass('active');
        });
}
</script>

但是当我使用下面的代码时它可以工作，但是当我点击绿色图标时右侧的内容也需要移动到全屏。

document.getElementById("layout-menu").style.width = "25px";

我这边是不是遗漏了什么代码。

Answer 1

嗯 active class 在你的 CSS

中没有定义

添加此样式可以解决您的问题

#layout-menu.active {
    width: 64px;
}

你还需要添加这个样式

.active~.layout-page {
    padding-left: 65px !important;
}

所以右边的部分长大填充额外的space

还有

.app-brand .layout-menu-toggle {
    position: absolute;
    left: 15rem;
    border-radius: 50%;
}

最好将图标从元素的右侧对齐，或者如果您不想更改它，此样式可以帮助您在菜单更改的同时处理该图标

.active .layout-menu-toggle {
    left: 4rem;
}

我建议你不要使用静态宽度值，你可以使用 flex 和 flex-grow 而不是 padding

单击图标时切换菜单不会折叠

Toggle menu is not collapsing when I click the icon

html

jquery

bootstrap-4