Twitter bootstrap 3 使用TreeView获取引导3选项卡窗格

我正在尝试从BootSnipp获取树视图：使用Bootstrap 3选项卡

它最初的工作原理与预期一样，但在点击几下后就崩溃了，然后响应/不响应。以下是我正在使用的html+js+css：

/****************开始树JS**********************
$.fn.extend({
treed:function（）{
返回此值。每个（函数（）{
//初始化每个顶层
var-tree=$（这个）；
addClass（“树”）；
tree.find（'li'）。有（'ul'）。每个（函数（）{
var branch=$（this）；//li与子对象ul
分支。预结束（“”）；
branch.addClass（“branch”）；
“点击”功能（e）上的分支{
if（this==e.target）{
var icon=$（this.children（'i:first'）；
toggleClass（“glypicon减号glypicon加号”）；
$（this.children（）.children（）.toggle（）；
}
})
branch.children（）.children（）.toggle（）；
});
//从动态添加的图标触发事件
$（'.branch.indicator'）。在（'click'，function（）上{
$（this）.最近（'li'）。单击（）；
});
//如果li包含锚定而不是文本，则触发事件以打开分支
$（'.branch a'）。在（'click'，函数（e）上{
$（this）.最近（'li'）。单击（）；
e、 预防默认值（）；
});
//如果li包含按钮而不是文本，则触发事件以打开分支
$（'.branch button'）。在（'click'，函数（e）上{
$（this）.最近（'li'）。单击（）；
e、 预防默认值（）；
});
});
}
});
$（'.tree'）.treed（）；
//*****************结束树JS*****************

/*开始树CSS*/
.树，
树胶{
保证金：0；
填充：0；
列表样式：无
}
树胶{
左边距：1米；
职位：相对
}
树胶{
左边距：.5em
}
树：以前{
内容：“；
显示：块；
宽度：0；
位置：绝对位置；
排名：0；
底部：0；
左：0；
左边框：1px实心
}
李先生{
保证金：0；
填充：0.1em；
线高：2米；
颜色：#369；
字号：700；
职位：相对
}
李：以前{
内容：“；
显示：块；
宽度：10px；
身高：0；
边框顶部：1px实心；
页边顶部：-1px；
位置：绝对位置；
顶部：1米；
左：0
}
最后一个孩子：以前{
背景：#fff；
高度：自动；
顶部：1米；
底部：0
}
.指标{
右边距：5px；
}
李树先生{
文字装饰：无；
颜色：#369；
}
.tree li按钮，
.tree li按钮：激活，
.tree li按钮：焦点{
文字装饰：无；
颜色：#369；
边界：无；
背景：透明；
保证金：0px 0px 0px 0px；
填充：0px 0px 0px 0px；
大纲：0；
}

大陆详情
国家/地区详细信息
国家/地区详细信息
城市详细信息
社区详细信息
城市详细信息
城市详细信息
社区详细信息
社区详细信息

好的，我自己试试

它不起作用，因为Bootstrap希望标签是一个平面ul，而我有多个嵌套ul

我让它工作了

将树与选项卡分离

为标签创建隐藏的平面ul；及

钩住相关树锚单击以手动调用相应选项卡上的$（'…）.tab（'show'）

我还发现，使用这种策略，我可以从页面上的任何位置调用我的标签，例如从面包屑或随机锚

现在我知道我的问题对于大多数人来说都是太不明智了——html本身到处都是

我能得出的答案看起来有点粗糙。至少有人会评论它的好坏吗？比如，它会因为隐藏ul而招致搜索引擎惩罚吗？可访问性的含义是什么？特别是当我从锚定标签中删除文本时

或者我应该发布一个或多个新问题来征求这种反馈

干杯

/****************开始树JS**********************
$.fn.extend({
treed:function（）{
返回此值。每个（函数（）{
//初始化每个顶层
var-tree=$（这个）；
addClass（“树”）；
tree.find（'li'）。有（'ul'）。每个（函数（）{
var branch=$（this）；//li与子对象ul
分支。预结束（“”）；
branch.addClass（“branch”）；
“点击”功能（e）上的分支{
如果（这个）==