Bootstrap 如何使用CSS通过引导程序折叠修改图标

vi4fp9gy 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(2)|浏览(205)

我尝试用bootstrap collapse命令来创建一个带有子点的列表，这个命令运行得很好，但是我需要添加一个箭头，当折叠向上时指向右侧，当折叠向下时指向下方。
这是我的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？

twitter-bootstrap

来源：https://stackoverflow.com/questions/26149593/how-to-use-css-to-modify-an-icon-with-the-bootstrap-collapse

2条答案

按热度按时间

epggiuax1#

Here you are: JSFiddle. I've solved it with jQuery.
Your first "mistake" was to have a false CSS-Selector order. Your glyphicon isn't inside the .collapse class.
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');
 })

赞(0）回复(0）举报 2022-12-07

uubf1zoe2#

如果设置正确，就不需要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 -->

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap 如何使用CSS通过引导程序折叠修改图标

2条答案

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

CSS--这些是我的风格，让它看起来更好看，有点多。

HTML格式

相关问题

热门标签

最新问答