Javascript 使用淘汰JS和引导的多级菜单

我正在尝试使用knockoutjs和Bootstrap创建一个多级菜单，但我不确定如何创建

以下是我目前掌握的情况：

var Person=函数（名称、子项）{
this.name=ko.observable（name）；
this.children=ko.observearray（children | |[]）；
};
var PeopleModel=函数（）{
this.people=ko.array([
新人（“鲍勃”[
新人（“一月”），
新人（“堂”[
新人（“Ted”），
新人（“本”[
新人（“乔”[
新人（“阿里”），
新人（“肯”）
])
]),
新人（“道格”）
])
]),
新人（“安”[
新人（“Eve”），
新人（“Hal”）
])
]);
this.addChild=函数（名称，parentArray）{
parentArray.push（新用户（名称））；
};
};
$（函数（）{
应用绑定（newpeoplemodel（））；
});

切换导航






部分答案：
您在锚上有一个
文本
绑定，锚中应该有一个插入符号。
文本
绑定将覆盖所有内容，这就是您没有插入符号的原因。相反：

    <a href="#" class="dropdown-toggle" data-bind="visible: children().length > 0" 
       data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
        <span data-bind="text: name"></span>
        <span class="caret"></span>
    </a>




我仍然没有得到子菜单，但插入符号确实表明HTML知道don的孩子。也许会有帮助

官方看来是这样的。
谢谢，我使用了你发布的css链接

我是这样解决的：


var Person=函数（名称、子项、根项）{
this.name=ko.observable（name）；
this.children=ko.observearray（children | |[]）；
this.rootItems=ko.observable（rootItems | | false）；
};
var PeopleModel=函数（）{
this.people=ko.array([
新人（“鲍勃”[
新人（“一月”），
新人（“堂”[
新人（“Ted”），
新人（“本”[
新人（“乔”[
新人（“阿里”），
新人（“肯”）
])
]),
新人（“道格”）
])
]是的，
新人（“安”[
新人（“Eve”），
新人（“Hal”）
]，对）
]);
this.addChild=函数（名称，parentArray）{
parentArray.push（新用户（名称））；
};
};
$（函数（）{
应用绑定（newpeoplemodel（））；
});

.下拉子菜单{位置：相对；}
.下拉子菜单>.下拉菜单{顶部：0；左侧：100%；页边距顶部：-6px；页边距左侧：-1px；-webkit边框半径：0 6px 6px 6px；-moz边框半径：0 6px 6px 6px；边框半径：0 6px 6px 6px；}
.dropdown子菜单：悬停>.dropdown菜单{显示：块；}
.下拉子菜单>a:在{显示：块；内容：“；浮动：右；宽度：0；高度：0；边框颜色：透明；边框样式：实心；边框宽度：5px 0 5px 5px；边框左颜色：#cccccc；边框顶部：5px；边框右侧：-10px；}
.下拉子菜单：悬停>a:在{边框左侧颜色：#ffffff；}之后
.下拉子菜单.左拉{float:none；}.下拉子菜单.左拉>.下拉菜单{left:-100%；左边距：10px；-webkit边框半径：6px 0 6px 6px；-moz边框半径：6px 0 6px 6px；边框半径：6px 0 6px 6px；}
切换导航








你能不能把它放在小提琴里，准确地解释一下你遇到问题的部位？检查Chrome调试器中的项目表明结构已经就位。很明显，Bootstrap不喜欢这种结构。当我在我的计算机上尝试时，我看到数组中的根值（Bob和Ann）。我还看到了后代值（Jan Don和Eve Hal）。但我看不到唐的其他价值观。你可以看到小提琴，但小提琴不太好用。我发现了一把小提琴，它似乎可以实现你想要的：它可能需要你稍微改变一下你的结构。