5

複数の説明項目 (dd) を持つ定義リストでjQuery アコーディオンを使用できないようです。著者の例には、単一の dd 項目しかありません。

以下の例では、B2、B3、および C2 は、私が好むように A1、B1、および C1 のように非表示にするのではなく、onLoad を表示します。

どうすればこれを達成できますか？

jQuery('dl').accordion({ 
    event: 'click',     
    active: false, 
    animated: "bounceslide", 
    header: "dt" 
});​

<dl>

    <dt>A</dt>
    <dd>A1</dd>

    <dt>B</dt>
    <dd>B1</dd>
    <dd>B2</dd>
    <dd>B3</dd>

    <dt>C</dt>
    <dd>C1</dd>
    <dd>C2</dd>

</dl>

(ライブ jsFiddle バージョン)

4

3 に答える 3

5 
$(function () {
    $('dt').on('click', function (e) {
        e.preventDefault();
        $(this).parent('dl').children('dd:visible').slideUp('slow');
        $(this).nextUntil('dt').filter(':not(:visible)').slideDown('slow');
    });
});

ノート：

複数のセクションが必要な場合

すぐに開きます。アコーディオンは使用しないでください

  • アコーディオンでは、複数のコンテンツ パネルを同時に開くことはできず、これを行うには多大な労力が必要です。複数のコンテンツ パネルを開くことができるウィジェットを探している場合は、これを使用しないでください。通常、代わりに次のような数行の jQuery で記述でき ます。

この助けを願っています！;)

于 2010-08-11T23:55:14.060 に答える
2

著者は、コンテンツはヘッダーに隣接する必要があると主張しています。 余分な'sInspect Elementを無視することを示します。<dd>

<dt tabindex="0" aria-expanded="true" role="tab" class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top"><span class="ui-icon ui-icon-triangle-1-s"></span>B</dt>
<dd role="tabpanel" style="height: 20px; display: block; overflow: visible; padding-top: 0px; padding-bottom: 0px;" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active">B1</dd>
<dd>B2</dd>
<dd>B3</dd>

HTML レンダリングを制御できる場合は、<p>要素を<dd>'s 内にネストできます:

<dt>B</dt>
<dd>
    <p>B1</p>
    <p>B2</p>
    <p>B3</p>
</dd>
于 2010-08-07T18:19:53.957 に答える