单击 jquery 时的下拉菜单 CSS

Question

我有一个由带有内容的 div 组成的点击下拉菜单。

它有一个标题，当点击 jquery 菜单时会显示。它工作正常我只是想为它制作动画。 （向下和向上）。

主要 div 有一个相对位置，因为我需要在标题下显示具有绝对位置的子项。

$(".item").click(function() {
  if ($(this).hasClass('active')) {
    $(this).removeClass('active');
  } else {
    $(this).addClass('active');
  }
})

.item {
  position: relative;
}

.item .item_group {
  display: none;
}

.item.active .item_group {
  display: block;
  position: absolute;
  width: 100%;
  background: #fff;
  z-index: 100;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item active">
  <h6>Title</h6>
  <div class="item_group">
    <div class="item_child">
      content
    </div>
    <div class="item_child">
      content
    </div>
    <div class="item_child">
      content
    </div>
  </div>
</div>

请记住：它可以正常工作，但我希望动画下来和向上以获得很酷的结果

Answer 1

首先，请注意您的 if 语句以检查元素的可见性然后添加/删除类，以供将来参考，只需一次调用 toggleClass() 即可替换

根据您的要求，如果您只是想在元素显示或隐藏时为元素的过渡设置动画，您可以使用slideToggle()：

$(".item").click(function() {
  $(this).find('.item_group').slideToggle();
})

.item {
  position: relative;
}

.item .item_group {
  display: none;
  position: absolute;
  width: 100%;
  background: #fff;
  z-index: 100;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item active">
  <h6>Title</h6>
  <div class="item_group">
    <div class="item_child">
      content
    </div>
    <div class="item_child">
      content
    </div>
    <div class="item_child">
      content
    </div>
  </div>
</div>

这也可以使用transition单独在 CSS 中实现：

$(".item").click(function() {
  $(this).toggleClass('active');
})

.item {
  position: relative;
}

.item .item_group {
  height: 0;
  position: absolute;
  width: 100%;
  background: #fff;
  z-index: 100;
  transition: height 0.5s;
  overflow: hidden;
}

.item.active .item_group {
  height: 55px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item active">
  <h6>Title</h6>
  <div class="item_group">
    <div class="item_child">
      content
    </div>
    <div class="item_child">
      content
    </div>
    <div class="item_child">
      content
    </div>
  </div>
</div>