在我的网站上,导航栏右侧有一个菜单。当搜索在当前页面上可用时,它会显示搜索。
我想在搜索可用时显示一个图标。
所有搜索 block 都有 .views-exposed-form
类并出现在 #navbar-collapse-second
我在我的图标中添加了类 .icon-navbar-alert-disable
用于隐藏图标。
当 .views-exposed-form
类出现在 #navbar-collapse- 中时,如何删除
?.icon-navbar-alert-disable
类第二个
这是隐藏图标的CSS代码:
.region-navigation-menu-second .navbar-toggle-second .icon-navbar-alert-disable {
display: none;
}
这是我的带有图标的菜单按钮的代码:
<div{{ attributes }}>
<a class="navbar-toggle-second collapsed" data-toggle="collapse" data-target="#navbar-collapse-second" aria-expanded="false">
<div class="icon-navbar">
<span class="fa-layers fa-3x">
<i class="far fa-circle"></i>
<span class="navbar-icon-open">
<i class="fas fa-filter" data-fa-transform="shrink-9"></i>
</span>
<span class="navbar-icon-close">
<i class="fas fa-times" data-fa-transform="shrink-8"></i>
</span>
</span>
</div>
<div class="icon-navbar-alert icon-navbar-alert-disable">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-filter fa-stack-1x fa-inverse"></i>
</span>
</div>
</a>
</div>
这里是相关的页面,这是右边的菜单:
https://www.s1biose.com/boutique/ma-boutique-pro
我开始了一个 JS 代码,但它并不完整:
$('#navbar-collapse-second') ???.views-exposed-form??? {
$('#block-togglenavigationsecond').removeClass('icon-navbar-alert-disable');
});
更新
(function ($) {
if ($('#navbar-collapse-second').hasClass('views-exposed-form')) {
$('#block-togglenavigationsecond').removeClass('icon-navbar-alert-disable');
} else {
$('#block-togglenavigationsecond').addClass('icon-navbar-alert-disable');
};
})(window.jQuery);
最佳答案
您在寻找 jQuery 中的 hasClass 选择器吗?
如果是这样,将其包装在一个 if 语句中,您可以在其中显示您想要的结果;
if ($('#navbar-collapse-second').hasClass('views-exposed-form') === false) {
$('#block-togglenavigationsecond').removeClass('icon-navbar-alert-disable');
} else {
$('#block-togglenavigationsecond').addClass('icon-navbar-alert-disable');
};
关于javascript - 如果元素不存在,如何使用 JS 删除类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50156823/