我正在使用此Javascript脚本在用户选择此选项时显示与特定主题相关的Youtube频道列表,但如果再次单击该主题的名称,则其选项卡不会折叠。相反,它再次显示频道列表。
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+")'>> "+channel.name+"</span><div id='videos"+channel.id+"' class='contentChannel'></div></li>");
});
}
答案 0 :(得分:4)
您可以尝试在collapsible: true
init中设置tabs
。见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>> "+channel.name+"</span><div id='videos"+channel.id+"' class='contentChannel'></div></li>");
});