javascript - jQuery手风琴

Question

我们的html：

<ul class="accordion">
 <li>
  <h2 class="a-head">head 1</h2>
  <div class="a-body">body 1</div>
 </li>
 <li>
  <h2 class="a-head">head 2</h2>
  <div class="a-body">body 2</div>
 </li>
 <li>
  <h2 class="a-head">head 3</h2>
  <div class="a-body">body 3</div>
 </li>
</ul>

JS：

$(".accordion .a-head").click(function()
{
    $(this).css({backgroundColor:"#ccc"}).next(".a-body").slideToggle().siblings(".a-body").slideUp();
    $(this).siblings().css({backgroundColor:"#fff"});
});

如果我删除，这个手风琴开始工作<li></li>。如何使其与当前代码一起使用？

其实问题出在.siblings().

谢谢。

Answer 1

是你想要的吗？： http: //jsfiddle.net/v2Z5L/1/ 如果你为你的“a-body”元素放置一个容器会更简单。现在，它们中的每一个都一个接一个地滑动。

Answer 2

我可以给你这个：

jQuery：

$('li h2.a-head').click(
    function(){
        $(this).closest('ul').find('div.a-body').slideUp(400);
        $(this).closest('li').find('div.a-body').slideToggle(400);
    });

CSS：

li div.a-body {
    display: none;
}

JS 小提琴演示。