使用Knockout JS和Bootstrap的多级菜单
Multilevel Menu using Knockout JS and Bootstrap
我正试图使用Knockout JS和Bootstrap制作多级菜单,但我不确定如何。
到目前为止我写的是:
var Person = function (name, children) {
this.name = ko.observable(name);
this.children = ko.observableArray(children || []);
};
var PeopleModel = function () {
this.people = ko.observableArray([
new Person("Bob", [
new Person("Jan"),
new Person("Don", [
new Person("Ted"),
new Person("Ben", [
new Person("Joe", [
new Person("Ali"),
new Person("Ken")
])
]),
new Person("Doug")
])
]),
new Person("Ann", [
new Person("Eve"),
new Person("Hal")
])
]);
this.addChild = function (name, parentArray) {
parentArray.push(new Person(name));
};
};
$(function () {
ko.applyBindings(new PeopleModel());
});
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-debug.js"></script>
<div class="navbar navbar-default " role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul id="people" class="nav navbar-nav"
data-bind="template: { name: 'personTmpl', foreach: people }">
</ul>
</div>
</div>
<script id="personTmpl" type="text/html">
<li data-bind="css: { dropdown: children().length > 0 }">
<a href="#" data-bind="text: name, visible: children().length < 1"></a>
<a href="#" class="dropdown-toggle"
data-bind="text: name, visible: children().length > 0"
data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</a>
<ul class="dropdown-menu"
data-bind="template: { name: 'personTmpl', foreach: children }">
</ul>
</li>
</script>
谢谢你@Roy J,我使用了你发布的css链接。
我是这样解决的:
var Person = function (name, children, rootItems) {
this.name = ko.observable(name);
this.children = ko.observableArray(children || []);
this.rootItems = ko.observable(rootItems || false);
};
var PeopleModel = function () {
this.people = ko.observableArray([
new Person("Bob", [
new Person("Jan"),
new Person("Don", [
new Person("Ted"),
new Person("Ben", [
new Person("Joe", [
new Person("Ali"),
new Person("Ken")
])
]),
new Person("Doug")
])
], true),
new Person("Ann", [
new Person("Eve"),
new Person("Hal")
], true)
]);
this.addChild = function (name, parentArray) {
parentArray.push(new Person(name));
};
};
$(function () {
ko.applyBindings(new PeopleModel());
});
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-debug.js"></script>
<style type="text/css">
.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu:hover>.dropdown-menu{display:block;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#ffffff;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}
</style>
<div class="navbar navbar-default " role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul id="people" class="nav navbar-nav"
data-bind="template: { name: 'personTmpl', foreach: people }">
</ul>
</div>
</div>
<script id="personTmpl" type="text/html">
<li data-bind="visible: rootItems(), css: { dropdown: children().length > 0 }">
<a href="#" data-bind="text: name, visible: children().length < 1"></a>
<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>
<ul class="dropdown-menu" data-bind="template: { name: 'personTmpl', foreach: children }"></ul>
</li>
<li data-bind="visible: rootItems() ? false : true, css: { 'dropdown-submenu': children().length > 0 }">
<a href="#" data-bind="text: name, visible: children().length < 1"></a>
<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>
</a>
<ul class="dropdown-menu" data-bind="template: { name: 'personTmpl', foreach: children }"></ul>
</li>
</script>
部分答案:锚上有一个text
结合它里面应该有一个插入符号。text
绑定将覆盖所有内容,这就是没有插入符号的原因。而不是:
<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的孩子。这个例子可能会有帮助。
官方的说法是,在Bootstrap 3中不支持子菜单
相关文章:
- jQuery-适用于移动设备的多级菜单
- 可替代多级上下文菜单
- slideDown菜单-添加更多级别的问题
- 悬停样式应该在动态加载多级菜单时保持单击状态
- 多级手风琴式导航菜单
- 如何在不插入整个代码的情况下嵌入现有的多级下拉菜单
- 如果菜单处于活动状态或非活动状态,则切换图标的类.多级按钮菜单
- 使用 jquery 的多级下拉菜单
- 记住菜单状态垂直多级导航
- 多级响应菜单..移动和非移动之间的转换
- 多级菜单的角度指令
- 常见问题解答的多级菜单
- 如何添加多级菜单
- 如何停止 e.prevent默认在创建响应式多级菜单时禁用子链接
- 使用Knockout JS和Bootstrap的多级菜单
- 响应多级菜单-如何关闭菜单时,链接被点击
- Codrops多级菜单-加载html页面,而不是ajax内容,但保持动画
- 使用js拖放进行多级菜单管理
- 多级菜单
- 尝试为响应式多级菜单制作一个小脚本