1

我正在使用一个 jquery 手风琴，我从 Learning Jquery 网站上的教程中重新制作：http:
//www.learningjquery.com/2007/03/accordion-madness
它工作得非常好，除非我把它放在一个循环中。两次迭代后，手风琴显示完全打开，根本不工作......

贾斯文

<script type="text/javascript">
//simultaneous showing and hiding
$(document).ready(function() {
  $('div.tiny-accordion:eq(0) > div').hide();
  $('div.tiny-accordion:eq(0) > h3').click(function() {
    $(this).next('div').slideToggle('fast')
    .siblings('div:visible').slideUp('fast');
  });

  $('div.tiny-accordion:eq(1) > div').hide();  
  $('div.tiny-accordion:eq(1) > h3').click(function() {
    var $nextDiv = $(this).next();
    var $visibleSiblings = $nextDiv.siblings('div:visible');

    if ($visibleSiblings.length ) {
      $visibleSiblings.slideUp('fast', function() {
        $nextDiv.slideToggle('fast');
      });
    } else {
       $nextDiv.slideToggle('fast');
    }
  }); 
});
</script>

HTML 是大循环的一部分

<div class="tiny-accordion">
    <h3><div>1</div></h3>
    <div>
        <div class="line">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </div>
    </div>

    <h3><div>2</div></h3>
    <div>
        <div class="line">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </div>
    </div>

        <h3><div>3</div></h3>
    <div>
        <div class="line">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </div>
    </div>
</div>

CSS：

/* MENU ACCORDEON */
.tiny-accordion{
    width: 245px;
    position: relative;
 }

.tiny-accordion h3{
    position: relative;
    top: 0px;
    cursor: pointer;
    padding: 0px;
    margin: 0px 0px 10px 0px;
    height: 29px;
}

.tiny-accordion div{
background-color: #F5F5F5;
}

这似乎是一个 js 问题，因为在循环中一切正常，除了手风琴。我还尝试手动重复 html 代码 3 次和 4 次，这是同样的问题。

这是一个 jsfiddle 链接：http: //jsfiddle.net/TF5AV/

4

1 回答 1

0

问题是选择器 eq(0) 和 eq(1)，它们表明您的脚本只会影响它会找到的“tiny-accordion”div 的第一个和第二个

它应该更新如下

$(document).ready(function() {
  $('div.tiny-accordion > div').hide();
  $('div.tiny-accordion > h3').click(function() {
    var $nextDiv = $(this).next();
    var $visibleSiblings = $nextDiv.siblings('div:visible');

    if ($visibleSiblings.length ) {
      $visibleSiblings.slideUp('fast', function() {
        $nextDiv.slideToggle('fast');
      });
    } else {
       $nextDiv.slideToggle('fast');
    }
  }); 
});

在我的 jsfiddle 上，我已经为您设置了 3 套手风琴的示例，请查看并自己尝试。

演示

eq 参考http://api.jquery.com/eq/

已编辑： http: //jsfiddle.net/TF5AV/1/ 我在您的问题中的最后一次更新中更新了 jsfiddle

于 2013-08-02T13:48:00.987 回答