如何在jQuery中折叠选项卡

How to collapse tabs in jQuery?

本文关键字：折叠 选项 jQuery      更新时间：2023-09-26

我使用这个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>");
    });
}

您可以尝试在tabs init中设置collapsible: true。看到文档

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

但是在你的情况下，我觉得使用Accordion更好，它能更好地显示你的频道。

AND，正如@moonwave99所提到的，使用onclick属性并不好，特别是在循环中。阅读这个问题了解更多。(额外:文档事件委托)使用click事件处理程序，jquery提供。

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

和，从onclick的魔爪下拯救你的listChannels() 

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>");
});
相关文章：