使用jQuery創建擴展列表時遇到問題

Question

我需要為客戶的播客存檔頁面創建一個列表，該頁面打開后將顯示指向其單擊月份的不同播客的鏈接。 我非常希望在頁面右側的默認Blog歸檔窗口小部件具有BlogSpot所具有的功能： http : //kimrome.blogspot.com/

我可以在這里進行類似的操作： http : //thehummingbirdplace.com/test2.html，但是我不確定如何使顯示列表是否已擴展的箭頭。 因此，它需要在單擊時更改方向，並在再次單擊以關閉該部分時返回上一個方向。

在我的版本中，當我打開頁面時，還顯示了子元素，並且我不希望它們在單擊其父元素之前展開。

我在網上查看是否已經創建了jQuery來完成此操作，或者我可能如何做到這一點，但是由於我不確定這整個標題的正確性，因此得到的結果參差不齊。 任何幫助，將不勝感激！！

Answer 1

嘗試jQuery-UI 手風琴

$(...).accordion();

，或這樣： http : //jsfiddle.net/5SKLV/1/

$(...).myAccordion();

只需根據自己的喜好編寫CSS。

Answer 2

如果您想自己做（自己寫東西很有趣）：

我在根<ul>添加了#tree的ID， #tree級別1 <li>的文本包裝在<span> ：

<ul id="tree">
    <li>
        <span>parent1</span>
        <ul>
            <li>child11</li>
            <li>child12</li>
        </ul>
    </li>
    <li>
        <span>parent2</span>
        <ul>
            <li>child21</li>
            <li>child22</li>
        </ul>
    </li>
</ul>

要應用指向父元素左右的箭頭，請創建兩個帶有背景的CSS類（例如，您需要在其他位置找到背景圖像或自己制作背景圖像）：

.opened > span {
    background: url('arrow_pointing_down.png') left top;
    color: #0a0; /* just to make it easy to know which class it has */
}
.closed > span {
  background: url('arrow_pointing_right.png') right top;
    color: #00a; /* just to make it easy to know which class it has */
}

要在頁面加載時隱藏所有子元素...

$('#tree > li').addClass('closed');
// hide the level 2 ul's
$('#tree > li ul').hide();

然后在您的點擊處理程序中：

$("#tree > li > span").click(function (event) {
    event.preventDefault();
    // swap the opened and closed classes
    $(this).parent().toggleClass('opened closed');
     // toggle the level 2 ul instead of li
    $(this).parent().find("ul").toggle();
});

此處的演示工作： http : //jsfiddle.net/cTLGN/

---

額外：

此演示代碼未使用對jQuery對象的緩存引用來使其更易於閱讀。 實際上而不是：

$(this).parent().toggleClass('opened closed');
$(this).parent().find("ul").toggle();

...應該做：

var parent = $(this).parent(); // search the DOM once for this' parent, and remember it
parent.toggleClass('opened closed');
parent.find("ul").toggle();

..因為每次使用jQuery的$（）構造函數時，它都需要遍歷整個DOM，如果反復執行，則可能會非常昂貴。