我试图在单击菜单按钮或搜索按钮时切换 div 覆盖。但是,当我单击一个按钮然后单击下一个按钮时,它会关闭。
如何在单击另一个按钮时保持叠加层打开,但在菜单或搜索关闭时将其关闭?
// menu
$('.hamburger-icon').click(function() {
$('.search').removeClass('is-visible');
$('.navbar').toggleClass('show-nav');
$('.nav-items').toggleClass('db');
$('.overlay').toggleClass('show-overlay');
});
// search
$('.search-icon').click(function() {
$('.navbar').removeClass('show-nav');
$('.nav-items').removeClass('db');
$('.search').toggleClass('is-visible');
$('.overlay').toggleClass('show-overlay');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar db dt-xl w-100 border-box bg-white fixed absolute f6 d z-999">
<div class="pa3 ph4-m ph5-l ph5-xl">
<div class="center">
<div class="nav-buttons db absolute right-0 mr3 mr5-ns mr4-m dn-xl fr">
<a class="link dib grey hover-teal pv2 ph3 pointer search-icon" tabindex="0"><i class="fas fa-search"></i></a>
<a class="link dib grey hover-teal pv2 ph3 ml2-ns pointer hamburger-icon" tabindex="0"><i class="fas fa-bars"><span class="sr-only">Toggle Menu</span></i></a>
</div>
<ul class="nav-items dn dtc-xl v-mid w-100 pa0 ma0 mt3 tl">
<li></li>
</ul>
</div>
</div>
<div id="search" class="search fixed w-100 left-0 z-5">
<form action="{{ url('/search/results') }}" class="w-100 h-100">
<input type="search" name="q" placeholder="Search..." class="sans-serif w-100 h-100 ph3 ph4-m ph5-l ph5-xl br0 bn bg-white f4 f2-xl">
<button class="sr-only" type="submit"><i class="fas fa-search h-100"></i>Submit</button>
</form>
</div>
</nav>
<div class="overlay pointer"></div>
最佳答案
这里的问题是您使用 jQuery 的toggleClass 来切换覆盖层,toggle() 方法将在隐藏和显示之间切换。由于您在菜单和搜索中都有切换,因此当您单击一个,然后单击另一个时,叠加层会在切换后第二次单击时关闭。
使用 jQuery 的 hasClass() 方法检查您的菜单或搜索是否具有使它们可见的 css 类,它将返回 bool 值 true 或 false。
你可以这样做:
https://www.w3schools.com/jquery/html_hasclass.asp
$('.hamburger-icon').click(function() {
$('.search').removeClass('is-visible');
$('.navbar').toggleClass('show-nav');
$('.nav-items').toggleClass('db');
$('.overlay').addClass('show-overlay');
if(!($('.navbar').hasClass('show-nav'))) {
$('.overlay').toggleClass('show-overlay');
}
});
// search
$('.search-icon').click(function() {
$('.navbar').removeClass('show-nav');
$('.nav-items').removeClass('db');
$('.search').toggleClass('is-visible');
$('.overlay').addClass('show-overlay');
if(!($('.search').hasClass('is-visible'))) {
$('.overlay').toggleClass('show-overlay');
}
});
关于javascript - 切换菜单和搜索上的叠加,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55470127/