帶有多個說明項目的jQuery Accordion定義列表

我似乎無法使用jQuery Accordions以及具有多個說明項目（dd）的定義列表。作者的examples只有一個dd項目。帶有多個說明項目的jQuery Accordion定義列表

在下面的示例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 version）

來源

2010-08-04 Jon Hadley

是'nextUntil'的可能性？ – 2010-08-04 10:36:58

不幸的是，您的情況，手風琴的源代碼使用'。next（）'從header *到處*，所以不用修改源代碼或標記，你真的不能這樣做。 – 2010-08-09 23:05:23

演示：http://so.devilmaycode.it/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'); 
    }); 
});

注：

如果你想多段

開放一次，不要用手風琴

的手風琴不允許超過一個內容面板將在同時打開，並且需要很多努力做到這一點。如果您正在查看允許多個內容面板打開的小部件，請不要使用 this。通常，它能夠使用jQuery的幾行，而不是寫的東西這樣的： 參考：http://jqueryui.com/demos/accordion/

希望這有助於！ ;）

來源

2010-08-11 23:55:14

傑出，正是我想要的。出於興趣，手風琴提供什麼好處（如果有的話）？對於不同的風格變化，它只是一個更簡單的語法嗎 – 2010-08-12 08:50:31

恕我直言，我個人建議使用jQuery UI和它的手風琴插件只有當你需要建立一個複雜的應用程序，你可能需要一個簡單的方法來訪問選項，事件，方法，當然不同的主題風格！儘可能少的代碼會更好！ ;） – 2010-08-12 13:55:38

提交人聲稱的含量需要爲鄰近其頭部。 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渲染，你可以在<dd>內窩<p>元素的：

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

來源

2010-08-07 18:19:53 user194743

這絕對是一種可能的解決方案（並將驗證），但我寧願保留語義上正確的多個dd，並在可能的情況下找到jQuery解決方案... – 2010-08-07 20:31:34

啊，然後通過您的評論，它聽起來像是要延長手風琴做nextUntil（options.header）而不是next（）。嗯，希望有人/更多的經驗w /延伸將回答。 – user194743 2010-08-07 22:08:35

只是爲了補充aSeptik's simple solution：如果你想除了第一個每一個項目在網頁加載被關閉，補充一點：$('dd:not(:first-of-type)').hide();

我會建議使用在手風琴的一類，所以你仍然可以有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>...）

來源

2015-01-03 23:24:04 wheelmaker24

帶有多個說明項目的jQuery Accordion定義列表

回答

相關問題