Question

我似乎无法将jQuery Accordions用于具有多个解释项（dd）的定义列表。作者的examples只有单个dd项目。

在下面的例子中，B2，B3＆amp; C2显示onLoad，而不是像A1，B1和＆amp;我喜欢C1。

我将如何实现这一目标？

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>

（Live jsFiddle version）

Answer 1

演示： http://so.lucafilosofi.com/jquery-accordion-definition-list-with-multiple-description-items

$(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而不是东西   像这样：   参考： http://jqueryui.com/demos/accordion/

希望这有帮助！ ;）

Answer 2

作者声称内容需要与其标题相邻。 Inspect 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>中：

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

Answer 3

只是为了补充aSeptik's simple solution：如果您希望在页面加载时关闭除第一项以外的所有项目，请添加以下内容：$('dd:not(:first-of-type)').hide();

我建议在Accordions上使用一个类，这样你仍然可以在标记中使用unjqueryfized定义列表。像这样：

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

（然后在HTML中使用<dl class="accordion"><dt>...）

带有多个描述项的jQuery Accordion定义列表

3 个答案: