制作定制手风琴jQuery

Question

我正在制作定制手风琴。 我的问题是我不知道该怎么slideUp正被股利slideDown一旦我点击与有格尚未被对方头slideDown 。

这是我的代码：

CSS：

.grid-l1{ width: 500px; height: auto; min-height: 500px; overflow: hidden; padding: 10px; background: #000; }
.header{ width: 100%; text-align: left; background: #fff; color: #000; font-size: 14px; text-transform: uppercase; font-weight: bold; padding: 5px; cursor: pointer; margin: 0px !important; }
.level-box{ width: 100%; height: auto; overflow: hidden; background: #ededed; padding: 10px; display: none; }
.box-a1{ width: 100%; height: auto; overflow: hidden; margin: 5px 0px; }

HTML：

<div class="grid-l1">
    <div class="box-a1">
        <h2 class="header">
          Header
        </h2>   

        <div class="level-box">
          <label>Test Input</label>
          <input type="text">
        </div>
    </div> <!-- box-a1 -->
    <div class="box-a1">
        <h2 class="header">
          Header 2
        </h2>   

        <div class="level-box">
          <label>Test Input</label>
          <input type="text">
        </div>
    </div> <!-- box-a1 -->
    <div class="box-a1">
        <h2 class="header">
          Header 3
        </h2>   

        <div class="level-box">
          <label>Test Input</label>
          <input type="text">
        </div>
    </div> <!-- box-a1 -->
</div>

JS：

$('body').on('click', '.header', function() {
    $(this).closest('.box-a1').find('.level-box').slideToggle();
});

我应该使用slideToggle吗？ 我将感谢你们所做的每一个回应。 随便教我，我仍然是jQuery世界的新手:)非常感谢Sir先生。

Answer 1

试试这个

 $('body').on('click', '.header', function(e) { $('.box-a1').find('.level-box').stop().slideUp(); $(this).closest('.box-a1').find('.level-box').stop().slideToggle(); }); 

 .grid-l1{ width: 500px; height: auto; min-height: 500px; overflow: hidden; padding: 10px; background: #000; } .header{ width: 100%; text-align: left; background: #fff; color: #000; font-size: 14px; text-transform: uppercase; font-weight: bold; padding: 5px; cursor: pointer; margin: 0px !important; } .level-box{ width: 100%; height: auto; overflow: hidden; background: #ededed; padding: 10px; display: none; } .box-a1{ width: 100%; height: auto; overflow: hidden; margin: 5px 0px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="grid-l1"> <div class="box-a1"> <h2 class="header"> Header </h2> <div class="level-box"> <label>Test Input</label> <input type="text"> </div> </div> <!-- box-a1 --> <div class="box-a1"> <h2 class="header"> Header 2 </h2> <div class="level-box"> <label>Test Input</label> <input type="text"> </div> </div> <!-- box-a1 --> <div class="box-a1"> <h2 class="header"> Header 3 </h2> <div class="level-box"> <label>Test Input</label> <input type="text"> </div> </div> <!-- box-a1 --> </div> 

Answer 2

您可以使用.siblings()向上滑动其他框：

$('body').on('click', '.header', function() {
    var $box = $(this).closest('.box-a1');
    $box.siblings().find('.level-box').stop().slideUp();
    $box.find('.level-box').stop().slideToggle();
});

正如@ScottSelby在评论中指出的那样，动画应该在停止使用.stop()之前停止。 用户必须快速单击，但如果未停止，则同一元素上的动画会排队。

的jsfiddle

Answer 3

您可以在初始启动时slideUp所有级别框。 和单击的slideDown活动元素。

$('body').on('click', '.header', function() {
  $('.level-box').slideUp();
  var current = $(this).closest('.box-a1').find('.level-box');
  if (current.is(':visible')) {
    current.slideUp();
  } else {
    current.slideDown();
  }
});

DEMO