单击 jquery 时的下拉菜单 CSS

Posted 2023-05-08

【中文标题】单击 jquery 时的下拉菜单 CSS

【英文标题】：Dropdown menu CSS on click jquery

【发布时间】：2019-05-17 16:49:34

【问题描述】：

我有一个由带有内容的 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>

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

【参考方案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>

【讨论】：

没问题，很高兴为您提供帮助