如何折叠jQuery中的选项卡?

时间:2013-06-04 21:15:08

标签: javascript jquery jquery-ui jquery-ui-tabs

我正在使用此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+")'>&gt; "+channel.name+"</span><div id='videos"+channel.id+"' class='contentChannel'></div></li>");
    });
} 

1 个答案:

答案 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>&gt; "+channel.name+"</span><div id='videos"+channel.id+"' class='contentChannel'></div></li>");
});