html - 如何使用 CSS 修改带有 bootstrap collapse 的图标

Question

我正在尝试构建一个列表，其中包含使用 Bootstrap 折叠的命令折叠的子点。这工作正常，但我需要添加一个箭头，当折叠向上时指向右侧，当折叠向下时指向下方。

这是我的 HTML...

<ul>
<li data-toggle="collapse" data-target="#Sub1">List Item One <em class="glyphicon glyphicon-chevron-right"></em><em class="glyphicon glyphicon-chevron-down"></em>
<ul class="collapse" id="Sub1">
<li>Sub-item</li>
</ul>
<li>List Item Two</li>
</ul>

目前我正在使用这个CSS来修改它...

.collapse {display: none;}
.collapse.in {display: block;}
.collapsed > .glyphicon .glyphicon-chevron-down {display: inline-block;}
.collapsed > .glyphicon .glyphicon-chevron-right {display: none;}

http://jsfiddle.net/ddx0c3c2/

我遇到的问题是两个图标都在显示，并且在类更改时没有消失。是否可以仅使用 CSS 来完成此操作，还是我需要使用 jQuery？

Answer 1

给你:JSFiddle.我已经用 jQuery 解决了它。

您的第一个“错误”是错误的 CSS 选择器顺序。您的字形图标不在 .collapse 类中。

HTML:

<ul>
    <li data-toggle="collapse" data-target="#Sub1">List Item One <em class="glyphicon glyphicon-chevron-right arrow_show"></em><em class="glyphicon glyphicon-chevron-down"></em>

        <ul class="collapse" id="Sub1">
            <li>Sub-item</li>
        </ul>
        <li>List Item Two</li>
</ul>

CSS:

.collapse {
  display: none;
}

.collapse.in {
  display: block;
}

.glyphicon {
    display:none;
}
.arrow_show {
    display: inline;
}

JS:

$('li[data-target="#Sub1"]').on("click", function() {
  $('.glyphicon-chevron-right').toggleClass('arrow_show');
  $('.glyphicon-chevron-down').toggleClass('arrow_show');
 })