по какой-то причине кнопка закрытия на боковой панели не отображается и не работает, боковая панель отображения работает отлично, однако функция закрытия не работает. я предоставляю 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;
}
Причина, по которой вы не видите, что значок закрытия не отображается, заключается в том, что у вас нет необходимых стилей, которые заставляют элемент (.sidenav__close-icon
) отображаться/отображаться как значок.
Если он есть где-то в вашем проекте, я предлагаю вам внести некоторые изменения, например следующие:
function toggleClassName(el, className) {
el.toggleClass(className);
}
.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>
Большое спасибо, однако я изменил значок, и это сработало.