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

我需要爲我的客戶端的podcast存檔頁面創建一個列表，以便查看他們點擊的月份中不同播客的鏈接。我非常想要像BlogSpot的默認博客存檔窗口小部件在這裏的頁面右側：http://kimrome.blogspot.com/使用jQuery創建擴展列表時遇到問題

我能夠在這裏做這樣的事情：http://thehummingbirdplace.com/test2.html但我不知道如何使顯示列表是否已擴展的箭頭。所以當它被點擊時它需要改變方向並且當它再次被點擊以關閉該部分時返回到先前的方向。

我的版本也有顯示當我打開頁面的子元素，我不希望他們展開，直到他們的父母被點擊。

我在網上看看是否有已經創建的jQuery來做到這一點，或者我可能如何做到這一點，但由於我不知道這整個事情是否正確標題，我得到混合結果。任何幫助，將不勝感激！！

來源

2013-11-05 coolpup

你在找什麼是手風琴。使用jQuery創建手風琴菜單非常簡單。網上有很多教程。 – otherDewi

您還可以查看[** Jquery EasyUI Tree **]（http://www.jeasyui.com/demo/main/?plugin=Tree&theme=default&dir=ltr&pitem=）插件。查看** Async Tree **演示。 – th1rdey3

如果你想自己做（它的樂趣，寫的東西自己）：

我添加的#tree一個ID爲根<ul>，並在<span>包裹1級<li> S的文本：

<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，從而可以如果你反覆做這件事情會很貴。

來源

2013-11-05 07:05:09 jingtao

我喜歡自己編寫它的想法，但是當我嘗試了你的建議時，由於.hide（）也適用於父元素，所有內容都消失了，所以我也無法讓箭頭顯示出來（我爲自己創建了它使用） – coolpup

更新的答案，請參閱工作演示的小提琴。隨意修改CSS以更改外觀，或者修改Javascript以適應更多嵌套圖層（如果需要）。 – jingtao

嘗試jQuery的UI

$(...).accordion();

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

$(...).myAccordion();

在你的口味只要寫CSS。

來源

2013-11-05 07:01:35

我同意，像這樣一個純粹的CSS回退：http://jsfiddle.net/EumGj/2/ –

@StefanDunn，你的想法很棒！ –

謝謝，雖然它在

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

回答

相關問題