5

我似乎无法将jQuery Accordions与具有多个描述项 (dd) 的定义列表一起使用。作者的示例只有单个 dd 项。

在下面的示例中，B2、B3 和 C2 显示 onLoad，而不是像我喜欢的 A1、B1 和 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>

（现场 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 来编写，如下所示： 参考：http: //jqueryui.com/demos/accordion/

希望这有帮助！;)

于 2010-08-11T23:55:14.060 回答
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 呈现，则可以在's<p>内嵌套元素：<dd>

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

只是为了补充aSeptik 的简单解决方案：如果您希望在页面加载时关闭除第一个项目之外的每个项目，请添加以下内容：$('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');
});

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

于 2015-01-03T23:24:04.393 回答