如何使用 CSS 修改带有引导折叠的图标

Question

我正在尝试构建一个包含子点的列表，这些子点在使用引导折叠的命令时折叠。这工作得很好，但我需要添加一个箭头，当折叠向上时指向正确，当它下降时向下。

这是我的 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-Selector 顺序。您的字形图标不在 .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');
 })

Answer 2

如果设置正确，你不需要jQuery，你只需要设置你的css：

演示：http://jsbin.com/peqihe/2/edit

CSS -- 这些是我为了让它看起来更好看的样式，有点多。

 .panel-group, 
 .panel-group .panel, 
 .panel-group .panel-heading,
 .panel-group .panel-heading a,  
 .panel-group .panel-title,  
 .panel-group .panel-title a,  
 .panel-group .panel-body,
 .panel-group .panel-group .panel-heading + .panel-collapse > .panel-body  {
    border-radius:2px;
    border:0;
}
.panel-group .panel-heading + .panel-collapse > .panel-body {
  border-top: 0;
}


 .panel-group .panel-heading {
    padding: 0;
}
 .panel-group .panel-heading a {
    display: block;
    background: #668bb1;
    color:#fff;
    padding:15px;
     text-decoration:none;
   position: relative;
}
 .panel-group .panel-heading a.collapsed {
    background: #c4ced5; 
    color:inherit;
}

 .panel-group .panel-heading a:after {
    content: '-';
    position: absolute;
    right: 20px;
}
 .panel-group .panel-heading a.collapsed:after {
    content: '+';
}
 .panel-group .panel-collapse {
    margin-top:5px!important;
}
 .panel-group .panel-body  {
    background: #f7f7f7;
    padding:15px;
}
 .panel-group .panel {
  background-color: transparent;
}

.panel-group .panel-body p:last-child,
.panel-group .panel-body  ul:last-child,
.panel-group .panel-body  ol:last-child {
  margin-bottom: 0;
}

HTML

<div class="container">

         <div class="panel-group" id="accordion">

            <div class="panel panel-default">
               <div class="panel-heading">
                  <h4 class="panel-title">
                     <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                     Collapsible Group Item #1
                     </a>
                  </h4>
               </div><!--/.panel-heading -->
               <div id="collapseOne" class="panel-collapse collapse in">
                  <div class="panel-body">
                     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                  </div><!--/.panel-body -->
               </div><!--/.panel-collapse -->
            </div><!-- /.panel -->

            <div class="panel panel-default">
               <div class="panel-heading">
                  <h4 class="panel-title">
                     <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                     Collapsible Group Item #2
                     </a>
                  </h4>
               </div><!--/.panel-heading -->
               <div id="collapseTwo" class="panel-collapse collapse">
                  <div class="panel-body">
                     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                  </div><!--/.panel-body -->
               </div><!--/.panel-collapse -->
            </div><!-- /.panel -->

            <div class="panel panel-default">
               <div class="panel-heading">
                  <h4 class="panel-title">
                     <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                     Collapsible Group Item #3
                     </a>
                  </h4>
               </div><!--/.panel-heading -->
               <div id="collapseThree" class="panel-collapse collapse">
                  <div class="panel-body">
                     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                  </div><!--/.panel-body -->
               </div><!--/.panel-collapse -->
            </div><!-- /.panel -->
         </div><!-- /.panel-group -->

</div><!-- /.container -->