jquery - 打开另一个下拉菜单时如何关闭相邻的下拉菜单

Question

我正在尝试为结果页面设置过滤器列表。但我一次只想要三个活动列表中的一个。我正在使用 jQuery 来显示/隐藏列表。

这是我正在研究的精简版。 https://jsfiddle.net/JeffSydor/bgpw9x60/

$('.dropMenu ul').css('display', 'none');
$('.dropMenu').click(function() {
  var thisMenu = $(this).children('.listName'),
    thisList = $(this).children('ul');
  if (thisMenu.not('.open')) {
    thisMenu.toggleClass('open');
    thisList.slideToggle();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="lists">
  <div class="dropMenu">
    <div class="listName">
      <p class="authors">Contributors</p>
      <i class="fas fa-caret-down"></i>
    </div>
    <ul>
      <li><a href="#" class="author">name01</a></li>
      <li><a href="#" class="author">name02</a></li>
    </ul>
  </div>
  <div class="dropMenu">
    <div class="listName">
      <p class="categories">Categories</p>
      <i class="fas fa-caret-down"></i>
    </div>
    <ul>
      <li><a href="#" class="category">cat01</a></li>
      <li><a href="#" class="category">cat02</a></li>
    </ul>
  </div>
  <div class="dropMenu">
    <div class="listName">
      <p class="tags">Tags</p>
      <i class="fas fa-caret-down"></i>
    </div>
    <ul>
      <li><a href="#" class="tag">tag01</a></li>
      <li><a href="#" class="tag">tag02</a></li>
    </ul>
  </div>
</div>

我试图弄清楚如何在单击其他任何菜单时查找其他打开的菜单并关闭它们。

我也研究了 preventDefaults ，但这对我来说没有任何意义，或者它是否会起作用。

标签： jquerydrop-down-menu

Answer 1

在打开新的之前选择打开的并关闭它们

$('.dropMenu ul').css('display', 'none');
$('.dropMenu').click(function() {
  var thisMenu = $(this).children('.listName'),
    thisList = $(this).children('ul');
  if (thisMenu.not('.open')) {
    $('.dropMenu .open').removeClas('open')
    thisMenu.toggleClass('open');
    thisList.slideToggle();
  }
});