如何摺疊jQuery中的標籤？

我正在使用此JavaScript腳本來顯示與用戶選擇的特定主題相關的Youtube頻道列表，但如果再次單擊該主題的名稱，其選項卡不會摺疊。而是再次顯示頻道列表。如何摺疊jQuery中的標籤？

var channels=[ 
    { id:1, name:"Example 1", description:"", videos:[]}, 
    { id:2, name:"Example 2", description:"", videos:[]}, 
]; 

jQuery(function() { 
    jQuery("#tabs").tabs(); 
    listChannels(); 
}); 

function listChannels(){ 
    jQuery(channels).each(function(i,channel){ 
     jQuery("#listOfChannels").append("<li id='channel"+channel.id+"'><span onclick='showChannel("+channel.id+")'>&gt; "+channel.name+"</span><div id='videos"+channel.id+"' class='contentChannel'></div></li>"); 
    }); 
}

來源

2013-06-04 ssierral

的魔掌，也許增加一個'select'選項爲製表符init和中，你可以'hide'的tab..or也許您是在尋找對於手風琴 - http://jqueryui.com/accordion/？ – krishgopinath

通過jQuery寫入內聯'onclick'處理程序使我的眼睛流血。 – moonwave99

@ moonwave99使用'onclick'和'each'。它是一個致命的組合不是嗎？數組的長度===沒有單獨的onclick處理程序：D – krishgopinath

您可以嘗試在您的tabs初始設置中設置collapsible: true。見Docs

$("#tabs").tabs({ 
    collapsible: true 
});

但在你的情況，我覺得它能夠更好地使用Accordion，爲您的頻道帶來更好的視覺表現。

AND，由於@ moonwave99提到，它不好用onclick屬性，特別是在一個循環中。 Read this question to know more。（額外：Docs for event delegation）使用jQuery提供的事件處理程序click。

$("#listOfChannels").on("click", "li" , function() { 
    showChannel(this.id); 
});

，並保存listChannels()從onclick

jQuery(channels).each(function(i,channel){ 
    jQuery("#listOfChannels").append("<li id='channel"+channel.id+"'><span>&gt; "+channel.name+"</span><div id='videos"+channel.id+"' class='contentChannel'></div></li>"); 
});

來源

2013-06-04 21:29:57 krishgopinath

謝謝，我要試試這個。事實上，這是一個代碼已被其他人實施，我今天被告知要學習jQuery並解決這個問題:( – ssierral

如果它能幫助你，請將答案標記爲正確答案:-)學習jquery並不困難.. Docs在jquery.com中非常好 – krishgopinath

如何摺疊jQuery中的標籤？

回答

相關問題