javascript - 在菜单和搜索上切换叠加

Question

我试图在单击菜单按钮或搜索按钮时切换 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>

Answer 1

这里的问题是您使用 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');
}
});