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类，它将返回布尔值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');
}
});

Answer 2

您可以在此处轻松找到我的代码示例：

说明： ：通常，单击按钮可切换目标元素并确定您的操作。单击菜单按钮时，我在此处添加了一个小逻辑。然后，它添加新的类menuActive并检查其父级是否处于Search active状态。当激活搜索栏时。然后首先从父级中删除searchActive类，然后进行类似的切换以提及上一行。

我希望这段代码能解决您的问题。

//when menu button click
jQuery(document).on('click','.menuButton', function(){
  if(jQuery('.parent').hasClass('searchActive')) {
     jQuery('.parent').removeClass('searchActive');
     jQuery('.parent .searchCont').slideUp(0);
  }
  jQuery('.parent').toggleClass('menuActive').children('.menu').slideToggle(200);
})

//when search button click
jQuery(document).on('click','.searchButton', function(){
  if(jQuery('.parent').hasClass('menuActive')) {
     jQuery('.parent').removeClass('menuActive');
     jQuery('.parent .menu').slideUp(0);
  }
  jQuery('.parent').toggleClass('searchActive').children('.searchCont').slideToggle(200);
})

.menu,
.searchCont { display:none}
.menuButton,
.searchButton {
  display: inline-block;
  width: 50px;
  height: 20px;
  margin: 5px;
  background: gray;
  border: 2px solid #fff;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span class="menuButton">menu</span>
<span class="searchButton">Search</span>

<div class="parent">
  <div class="menu">
    <ul>
      <li>menu item</li>
      <li>menu item</li>
      <li>menu item</li>
    </ul>
  </div>
  <div class="searchCont">
      <input type="text" placeholder="search" />
      <input type="submit" vlaue="find">
  </div>
</div>

= = = = 谢谢 = = = =

在菜单和搜索上切换叠加

2 个答案: