手风琴html怎么判断箭头向下向上,html – 带箭头的Bootstrap手风琴

选择器之间存在问题：

.panel-heading [data-toggle="collapse"]:after

^------- // remove this space to make this selector work

现在,您要选择具有data-toggle属性的所有元素,这些元素是.panel-heading的后代.它应该是：

.panel-heading[data-toggle="collapse"]:after

.panel-heading {

position: relative;

}

.panel-heading[data-toggle="collapse"]:after {

font-family: 'Glyphicons Halflings';

content: "\e072"; /* "play" icon */

position: absolute;

color: #b0c5d8;

font-size: 18px;

line-height: 22px;

right: 20px;

top: calc(50% - 10px);

/* rotate "play" icon from > (right arrow) to down arrow */

-webkit-transform: rotate(-90deg);

-moz-transform: rotate(-90deg);

-ms-transform: rotate(-90deg);

-o-transform: rotate(-90deg);

transform: rotate(-90deg);

}

.panel-heading[data-toggle="collapse"].collapsed:after {

/* rotate "play" icon from > (right arrow) to ^ (up arrow) */

-webkit-transform: rotate(90deg);

-moz-transform: rotate(90deg);

-ms-transform: rotate(90deg);

-o-transform: rotate(90deg);

transform: rotate(90deg);

}

Test1

sadfsadfsdaf sadf

Test2

Bla bla bla