Почему DOM автоматически удаляет мои классы при изменении страницы?
У меня есть специально написанный аккордеон для моего «сиденава», это очень просто, просто добавляю класс при событии клика для запуска и сворачивания элементов меню, но проблема в том, что когда я нажимаю на ссылку в свернутом состоянии <li>, страница начинается с перенаправить; все классы, которые я добавил с помощью обработчика кликов javascript, - это автоматически удален, и это выглядит очень уродливо:
... и как я могу это исправить? Это мой javascript (jquery) и html-код:
$('.mine-trigger').click(function(){
var
control_click = $(this).hasClass('mine-trigger-open'),
howmuchchildrens = $(this).children('.mine-content').children('.mine-content__link').length,
calcPixels = (howmuchchildrens * 48) + 'px';
if (control_click == false){
$(this).addClass('mine-trigger-open');
$(this).children('.mine-content').css('max-height', calcPixels);
}
if (control_click == true) {
$(this).removeClass('mine-trigger-open');
$(this).children('.mine-content').css('max-height', 0);
}
});
<li class = "mine-trigger">
<a class = "sidenav__link">
<span class = "sidenav__icon ico-person"></span>
Cariler
</a>
<div class = "mine-content">
<a class = "sidenav__link mine-content__link" href='<?php echo site_url('yonetim/cari')?>'>
<span class = "sidenav__icon ico-person"></span>
Cari
</a>
<a class = "sidenav__link mine-content__link" href='<?php echo site_url('yonetim/personel')?>'>
<span class = "sidenav__icon ico-assignment_ind"></span>
Personel
</a>
</div>
</li>
Похоже, вы хотите перехватывать события кликов в пунктах меню и предотвращать их распространение на ваши элементы аккордеона.
Какой у вас HTML?
@D_N Я добавил...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Проще говоря, страница неавтоматически удаляет классы, которые вы применили.
Очевидно, вы намеренно применяете их при нажатии на закрытый элемент, прежде чем удалить их и установить максимальную высоту дочерних элементов на 0.
Вы устанавливаете атрибут max-height для дочерних элементов, но они появляются медленно. Похоже, это указывает на то, что при применении класса «mine-trigger-open» используется переход. Максимальная высота устанавливается мгновенно, но фактическая высота меняется с течением времени.
Однако, когда вы идете другим путем, вы мгновенно устанавливаете атрибут max-height в 0. Даже если происходит переход по атрибуту высоты, вы не увидите элементы, поскольку они были скрыты. Вместо того, чтобы применять атрибут max-height на этом этапе, я бы предложил, чтобы он появился в правиле, управляющем переходом, когда «mine-trigger-open» добавляется или удаляется.
Событие запускается из LI, поэтому «это» всегда будет .mine-trigger, и щелчок по любому дочернему элементу закроет. проверьте event.target, чтобы определить, был ли щелчок внутри навигационной ссылки, чтобы определить, следует ли закрыть аккордеон.
$('.mine-trigger').click(function(e){
var is_open = $(this).hasClass('mine-trigger-open');
var from_link = is_open && $(e.target).closest('.mine-content__link').length == 1;
if (!is_open) {
// open accordion
} else if (is_open && !from_link) {
// close accordion
}
Вы также можете получить/установить значение cookie или localStorage, чтобы повторно открыть аккордеон на странице, на которую вы переходите.
и извините за мой плохой английский :(