我遇到了一个有趣的错误。当CSS元素的关联元素在Bootstrap 3.0.2的痕迹导航组件中具有display: none;
时,不会消失。 jsFiddle要测试:尝试将视图模型中的模式从“模式1”切换到“模式2”。
我有一个使用knockout.js构建的痕迹链接。我使用嵌套li
绑定切换纯li
或a
与嵌套visible: onSomeCondition
的可见性。我的理解是,不可见的li
设置为display: none;
。 但是,这不会删除DOM中关联的li
,我认为这会使CSS保留伪元素。例如,我期待以下内容:
Mode 1 / Mode 2
但我明白了:
/模式1 /模式2
相关的淘汰赛代码是:
<ol class="breadcrumb">
<li data-bind="visible: isInMode1()">
<a href="#">Mode 1</a>
</li>
<li class="active" data-bind="visible: !isInMode1()">Mode 1</li>
<li data-bind="visible: isInMode2()">
<a href="#">Mode 2</a>
</li>
<li class="active" data-bind="visible: !isInMode2()">Mode 2</li>
</ol>
相关的Bootstrap 3.0.2 CSS如下所示。基于Bootstrap样式表,“/”字符被添加为伪“before”元素。
.breadcrumb {
padding: 8px 15px;
margin-bottom: 20px;
list-style: none;
background-color: #f5f5f5;
border-radius: 4px;
}
.breadcrumb > li {
display: inline-block;
}
.breadcrumb > li + li:before {
padding: 0 5px;
color: #cccccc;
content: "/\00a0";
}
.breadcrumb > .active {
color: #999999;
}
如果有更好的方法,或者我没有想到的跨浏览器解决方案,我将不胜感激任何意见。我宁愿不破解CSS,但这可能是更清洁的解决方案。
谢谢
快速链接:
答案 0 :(得分:0)
不要使用“可见”绑定,即使元素被隐藏,分隔符也会显示。使用“if”和“ifnot”bindngs:
<ol class="breadcrumb">
<li data-bind="if:isInMode1()">
<a href="#">Mode 1</a>
</li>
<li class="active" data-bind="ifnot:isInMode1()">Mode 1</li>
<li data-bind="if:isInMode2()">
<a href="#">Mode 2</a>
</li>
<li class="active" data-bind="ifnot:isInMode2()">Mode 2</li>
</ol>
答案 1 :(得分:0)
为了完整起见,并且因为我很少找到一个我可以回答的问题,但这个问题还没有一个明确的答案......这就是该怎么做:
<ol class="breadcrumb" data-bind="foreach: contentModel.breadcrumbs">
<!-- ko if: isInMode1($data) -->
<li data-bind="css: cssClass">
<a href="#" data-bind="text: displayName, click: $root.GetContent"></a>
</li>
<!-- /ko -->
<!-- ko ifnot: isInMode1($data) -->
<li data-bind="css: cssClass, text: displayName"></li>
<!-- /ko -->
...repeat for isInMode2.......
</ol>
if:和ifnot:bindings仅根据其评估呈现SUB元素.....始终呈现包含if / ifnot绑定的元素。