14

jquery アコーディオンのデフォルトの動作を拡張し、コンテンツ パネル内に [次へ] ボタンを追加したいと考えています。ユーザーがコンテンツ パネル内の [次へ] ボタンをクリックすると、アコーディオンは次の項目を開く必要があります。

このように次のアイテムを見つけることができました$(this).parent().next()が、実際のアクションをトリガーするのに問題がありました。

<div id="accordion">
   <h3><a href="#">Item 1</a></h3>
   <div>Item 1 content<br />
      <div onclick="$(this).parent().next().show();">NEXT</div>
   </div>
   <h3><a href="#">Item 2</a></h3>
   <div>Item 2 content<br />
   </div>
</div>
4

3 に答える 3

32

これが jQuery UI アコーディオン ウィジェットの場合、組み込みメソッドを使用する必要があります。

var $accordion = $("#accordion").accordion();
function openNextAccordionPanel() {
    var current = $accordion.accordion("option","active"),
        maximum = $accordion.find("h3").length,
        next = current+1 === maximum ? 0 : current+1;
    // $accordion.accordion("activate",next); // pre jQuery UI 1.10
    $accordion.accordion("option","active",next);
}

html:

<div onclick="openNextAccordionPanel();">NEXT</div>
于 2012-06-14T21:18:13.037 に答える
0

コードを完全に機能させるには、次のように html を変更する必要があります。

<div id="accordion">
   <h3><a href="#">Item 1</a></h3>
   <div class='showable'>Item 1 content<br />
      <div onclick="$(this).parent('.showable').hide().next().show();">NEXT</div>
   </div>
   <h3><a href="#">Item 2</a></h3>
   <div class='showable'>Item 2 content<br />
   </div>
</div>
于 2012-06-27T14:20:55.893 に答える