Question

我正在制作定制手风琴。我的问题是，当我点击其他标题时，我不知道如何dat <- data.frame(y=1:3,x=factor("a",levels=c("a","b")),x2=letters[c(1,2,1)]) # y = numeric, x=constant with 2 factor levels, x2=not constant with 2 factor levels dat[sapply(dat,function(x) length(levels({if(is.factor(x)) droplevels(x) else x}))!=1 )] # y x2 #1 1 a #2 2 b #3 3 a正在slideUp的div，其中div还不是slideDown。

这是我的代码：

CSS：

slideDown

HTML：

.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; }

JS：

<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>

我应该使用$('body').on('click', '.header', function() { $(this).closest('.box-a1').find('.level-box').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

制作定制手风琴jQuery

3 个答案: