javascript - 如何在jQuery中折叠标签？

Question

当用户选择此 Javascript 脚本时，我正在使用此 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>");
    });
} 

Answer 1

你可以尝试collapsible: true在你的tabs初始化中设置。查看文档

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

但是在您的情况下，我觉得使用Accordion会更好，它是您频道的更好视觉表示。

AND，正如@moonwave99 提到的，它不好使用onclick属性，尤其是在循环中。阅读此问题以了解更多信息。（附加：事件委托的文档）使用clickjquery 提供的事件处理程序。

$("#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>");
});