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，但是对我来说没有任何意义，或者它是否可行。

Answer 1

您只需向上滑动所有按钮，然后向下滑动单击的按钮。

 $('.dropMenu').click(function(){
    let lists = $('.dropMenu .listName');
    $('.dropMenu .listName').removeClass('.open');
    $('.dropMenu ul').slideUp();

    $(this).children('.listName').addClass('open');
    $(this).children('ul').slideDown();
 });

Answer 2

这将起作用，并且您甚至不需要if语句。

$(document).ready(function(){

	$('.dropMenu ul').css('display', 'none');

  $('.dropMenu').click(function(){
    $('.dropMenu').not($(this)).children('.listName').removeClass('open');
    $('.dropMenu').not($(this)).children('ul').slideUp();
    $(this).children('.listName').toggleClass('open');
    $(this).children('ul').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>

Answer 3

选择打开的并关闭它们，然后再打开一个新的

$('.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();
  }
});

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

3 个答案: