gpt4 book ai didi

css - Knockout.js & Bootstrap 3 - 面包屑伪元素

转载 作者:太空宇宙 更新时间:2023-11-03 18:29:34 24 4
gpt4 key购买 nike

我遇到了一个有趣的错误。当关联元素在 Bootstrap 3.0.2 的痕迹导航组件中具有 display: none; 时,CSS 伪元素不会消失。 jsFiddle测试:尝试将 View 模型中的模式从“模式 1”切换到“模式 2”。

我有一个使用 knockout.js 构建的面包屑链接。我将纯 lili 与嵌套 a 的可见性切换为带有 knockout 的 visible: onSomeCondition 绑定(bind)。我的理解是不可见的li设置为display: none;但是,这不会删除 DOM 中关联的 li,我认为这会使 CSS 保留伪元素。例如,我期待以下内容:

Mode 1 / Mode 2

但是我得到:

/模式一/模式二

相关的 knockout 代码为:

<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,但这可能是更简洁的解决方案。

谢谢

快速链接:

Bootstrap 3.0.2 Breadcrumbs

Knockout.js visible binding documentation

最佳答案

不要使用“可见”绑定(bind),即使元素隐藏,分隔符也会显示。使用“if”和“ifnot”绑定(bind):

<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>

关于css - Knockout.js & Bootstrap 3 - 面包屑伪元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20125078/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com