1

私たちの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()ます。

ありがとう。

4

2 に答える 2

1

それはあなたが望むものですか？： http： //jsfiddle.net/v2Z5L/1/ 「a-body」要素のコンテナを配置すると、より簡単になる可能性があります。今のところ、それぞれが1つずつスライドします。

于 2011-01-31T23:54:09.077 に答える
1

私はあなたにこれを提供することができます：

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フィドルデモ。

于 2011-02-01T00:03:51.337 に答える