.accordion-box { position:relative; padding:15px; background:#fff; } .accordion-box .list-item { position:relative; display:block; margin-bottom:-1px; background-color:#fff; border-top:1px solid #dedede; border-bottom:1px solid #dedede; } .accordion-box .list-item-title { padding:15px 0; position:relative; } .accordion-box .list-item-content { background-color:#fff; display:none; box-sizing:border-box; overflow:hidden; } .accordion-box .title-icon { position:absolute; top:15px; right:15px; transform:rotate(0deg); -ms-transform:rotate(0deg); /* IE 9 */ -moz-transform:rotate(0deg); /* Firefox */ -webkit-transform:rotate(0deg); /* Safari 和 Chrome */ -o-transform:rotate(0deg); -webkit-transition:all .5s ease-in-out; -moz-transition:all .5s ease-in-out; -o-transition:all .5s ease-in-out; transition:all .5s ease-in-out; } .accordion-box .title-icon-active { transform:rotate(90deg); -ms-transform:rotate(90deg); /* IE 9 */ -moz-transform:rotate(90deg); /* Firefox */ -webkit-transform:rotate(90deg); /* Safari 和 Chrome */ -o-transform:rotate(90deg); }
如何引入bootstrap.css会显示箭头,自己也可以在
<span class="title-icon title-icon-active"><i class="glyphicon glyphicon-chevron-right"></i></span>
通过其他方式添加