我想在点击链接时删除上层元素的类:
var icon_burger = document.querySelector(".page-header__logo-link--burger");
var logo_link = document.querySelector(".page-header__logo-link");
var icon_cross = document.querySelector(".page-header__icon-closed");
var main_nav = document.querySelector(".main-nav");
var link_cross = document.querySelector(".page-header__logo-link--closed");
icon_burger.addEventListener("click", function (event) {
event.preventDefault();
main_nav.classList.remove(".hidden-devices");
link_cross.remove(".hidden-devices");
});
.hidden-devices {
display: none;
}
<header class="page-header">
<div class="wrapper-flex">
<nav class="main-nav main-nav--nojs hidden-devices">
<button class="main-nav__toggle">
</button>
<ul class="main-nav__list site-list">
<li class="main-nav__items"><a>Главная</a></li>
<li class="main-nav__items"><a href="#">Фотографии</a></li>
<li class="main-nav__items"><a href="#">Конкурс</a></li>
<li class="main-nav__items"><a href="#">Lolkekcheburek</a></li>
</ul>
<a href="#" class="main-nav__toggle main-nav__toggle--close"></a>
</nav>
</div>
<div class="page-header__nav-wrap">
<a href="/" class="page-header__logo-link">
</a>
<a class="page-header__logo-link page-header__logo-link--burger">
<svg class="page-header__icon-burger">
<use xlink:href="#img--svg--icon-menu-burger"></use>
</svg>
</a>
<a class="page-header__logo-link page-header__logo-link--closed hidden-devices" href="#">
<svg class="page-header__icon-closed">
<use xlink:href="#img--svg--icon-menu-cross"></use>
</svg>
</a>
</div>
</header>
现在不行了。我认为这是因为 main-nav 在结构上比 .page-header__logo-link--burger 更高。但我不确定我的猜想是否正确。如何删除 .hidden-devices 类?
最佳答案
classList.remove
调用中的类名有问题。试试这个:
icon_burger.addEventListener("click", function (event) {
event.preventDefault()
main_nav.classList.remove("hidden-devices")
link_cross.remove("hidden-devices")
})
你不应该有 '.'在这种情况下在类名中。只有在编写选择器时才这样做。 classList.remove
需要一个字符串,它是类名,而不是选择器。
关于javascript - 从上层元素中移除元素类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46965053/