侧边栏的问题。侧边栏没有关闭

Question

由于某种原因，侧边栏上的关闭按钮没有显示也没有工作，显示侧边栏工作得很好，但关闭功能不起作用。我提供与关闭功能相关的 html、css 和 javascript 这是我的 html:

    <aside class="sidenav">
  <div  class="sidenav__close-icon">
    <i class="bi bi-x-lg"></i>
  </div>
  <img class="sidenav__logo" src="../static/img/ManageX5.png">
  <ul class="sidenav__list">
    <li class="sidenav__list-item">
      <a class="sidenav__list-item-items" href="{{url_for('dashboard')}}">Dashboard</a>
    </li>
    <li class="sidenav__list-item">
      <a class="sidenav__list-item-items" href="{{url_for('profile')}}">Profile</a>
    </li>
    <li class="sidenav__list-item">
      <a class="sidenav__list-item-items" href="{{url_for('users')}}">Users</a>
    </li>
    <li class="sidenav__list-item">
      <a class="sidenav__list-item-items" href="{{url_for('projects')}}">Projects</a>
    </li>
    <li class="sidenav__list-item">
      <a class="sidenav__list-item-items" href="{{url_for('sites')}}">Sites</a>
    </li>
  </ul>
  <ul class="sidenav__logout">
    <li class="list-logout-item">
      <a class="sidenav__list-item-logout" href="#">logout</a>
    </li>
  </ul>
</aside>

这是 JS 部分：

const menuIconEl = $('.menu-icon');
const sidenavEl = $('.sidenav');
const sidenavCloseEl = $('.sidenav__close-icon');

/*===== Add and remove provided class names =====*/
function toggleClassName(el, className) {
 if (el.hasClass(className)) {
  el.removeClass(className);
 } else {
  el.addClass(className);
 }
}

/*===== Open the side nav on click =====*/
menuIconEl.on('click', function() {
 toggleClassName(sidenavEl, 'active');
});

/*===== Close the side nav on click =====*/
sidenavCloseEl.on('click', function() {
 toggleClassName(sidenavEl, 'active');
});

这是与边栏相关的css：

.sidenav__close-icon {
   position: absolute;
   visibility: visible;
   top: 8px;
   right: 12px;
   cursor: pointer;
   font-size: 20px;
   color: #000;
 }

Answer 1

您看不到关闭图标的原因是您没有使元素 (.sidenav__close-icon) 成为 rendered/shown 的必要样式作为图标。如果您的项目中有它，我建议您进行如下调整：

您可以使用 jQuery 的 toggleClass 方法来切换 class

function toggleClassName(el, className) {
  el.toggleClass(className);
}

关闭 button/icon 具有 CSS 属性（位置、顶部、右侧），使其位于页面的右上角，导致不可见。您可能必须添加以下 CSS 才能为关闭图标提供相对位置。在您的情况下，相对性可以从其父元素 .sidenav 元素继承。

.sidenav {
  position: relative;
  width: 200px;
}

.sidenav__close-icon {
   position: absolute;
   visibility: visible;
   top: 8px;
   right: 12px;
   cursor: pointer;
   font-size: 20px;
   color: #000;
 }

这是一个切换活动 class 并演示更改的片段

const menuIconEl = $('.menu-icon');
const sidenavEl = $('.sidenav');
const sidenavCloseEl = $('.sidenav__close-icon');

/*===== Add and remove provided class names =====*/
function toggleClassName(el, className) {
  el.toggleClass(className); 

  // Much shorter, but the following lines can also work
  /*if (el.hasClass(className)) {
    el.removeClass(className);
  } else {
    el.addClass(className);
  }*/
}

/*===== Open the side nav on click =====*/
menuIconEl.on('click', function () {
  toggleClassName(sidenavEl, 'active');
});

/*===== Close the side nav on click =====*/
sidenavCloseEl.on('click', function () {
  toggleClassName(sidenavEl, 'active');
});

.sidenav {
  position: relative;
  width: 200px;
}

.sidenav__close-icon {
   position: absolute;
   visibility: visible;
   top: 8px;
   right: 12px;
   cursor: pointer;
   font-size: 20px;
   color: #000;
 }

 .active {
   outline: 1px solid red;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<aside class="sidenav">
  <div class="sidenav__close-icon">
    <i class="bi bi-x-lg">X</i>
  </div>
  <img class="sidenav__logo" src="../static/img/ManageX5.png">
  <ul class="sidenav__list">
    <li class="sidenav__list-item">
      <a class="sidenav__list-item-items" href="{{url_for('dashboard')}}">Dashboard</a>
    </li>
    <li class="sidenav__list-item">
      <a class="sidenav__list-item-items" href="{{url_for('profile')}}">Profile</a>
    </li>
    <li class="sidenav__list-item">
      <a class="sidenav__list-item-items" href="{{url_for('users')}}">Users</a>
    </li>
    <li class="sidenav__list-item">
      <a class="sidenav__list-item-items" href="{{url_for('projects')}}">Projects</a>
    </li>
    <li class="sidenav__list-item">
      <a class="sidenav__list-item-items" href="{{url_for('sites')}}">Sites</a>
    </li>
  </ul>
  <ul class="sidenav__logout">
    <li class="list-logout-item">
      <a class="sidenav__list-item-logout" href="#">logout</a>
    </li>
  </ul>
</aside>

侧边栏的问题。侧边栏没有关闭

problem with the sidebar. sidebar is not closing

html

javascript

sidebar