Проблема с боковой панелью. боковая панель не закрывается

по какой-то причине кнопка закрытия на боковой панели не отображается и не работает, боковая панель отображения работает отлично, однако функция закрытия не работает. я предоставляю 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;
 }
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
20
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Причина, по которой вы не видите, что значок закрытия не отображается, заключается в том, что у вас нет необходимых стилей, которые заставляют элемент (.sidenav__close-icon) отображаться/отображаться как значок. Если он есть где-то в вашем проекте, я предлагаю вам внести некоторые изменения, например следующие:

  1. Вы можете использовать метод jQuery toggleClass для переключения класса
function toggleClassName(el, className) {
  el.toggleClass(className);
}
  1. Кнопка/значок закрытия имеет свойства 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;
 }

Вот фрагмент, который переключает активный класс и демонстрирует изменение

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>

Большое спасибо, однако я изменил значок, и это сработало.

Ons Jannet 20.03.2022 21:34

Другие вопросы по теме