Список определений Accordion jQuery с несколькими элементами описания

Я не могу использовать 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>

( Версия Live jsFiddle )

jquery,jquery-ui,unobtrusive-javascript,

5

Ответов: 3

5 принят
+50
  • demo: 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, например: REFERENCE: http://jqueryui.com/demos/accordion/

надеюсь эта помощь! ;)

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>s:

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

Просто для дополнения простого решения aSeptik : если вы хотите, чтобы каждый элемент, кроме первого, был закрыт при загрузке страницы, добавьте это:$('dd:not(:first-of-type)').hide();

Я бы предложил использовать класс в Accordions, поэтому в вашей разметке все еще могут быть указаны списки определений без ошибок. Как это:

$('.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)

JQuery, JQuery-щ, ненавязчивый-JavaScript,
Похожие вопросы
Яндекс.Метрика