仅使用CSS切换手风琴字形图标 [英] Toggle accordion Glyph Icon with CSS only
问题描述
我有一个手风琴菜单,我想更改字形图标,我发现了一些问同样问题的人的答案,但是我发现在我的作品中没有答案.可能是因为我不知道在哪里应用代码.
Ey I have an accordion menu, I want to change the glyph icons, and I found some answers to people asking the same thing but no answer I found worked on mine. Probably because I dont know where to apply the code.
我在Jsfiddle中的菜单:
我尝试进入的字形图标:
https://codepen.io/tofanelli/pen/waadRY
我需要放置在某处的代码:
.panel-heading .accordion-toggle:after {
/* symbol for "opening" panels */
font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */
content: "\e114"; /* adjust as needed, taken from bootstrap.css */
float: right; /* adjust as needed */
color: grey; /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
/* symbol for "collapsed" panels */
content: "\e080"; /* adjust as needed, taken from bootstrap.css */
}
如果有另一种或更简单的方法可以做到这一点,我非常着迷!:)
If there is another or easier way to to this I'm all ears! :)
推荐答案
您可以使用:not(checked)
和 checked
CSS伪类解决此问题.
You can solve this using :not(checked)
and checked
CSS pseudo-classes.
删除此部分
.accordion-bral input:checked ~ .ac-label i:before {
transform: translate(2px, 0) rotate(-45deg);
}
.accordion-bral input:checked ~ .ac-label i:after {
transform: translate(-2px, 0) rotate(45deg);
}
.accordion-bral i:before, .accordion-bral i:after {
content: "";
position: absolute;
background-color: #808080;
width: 3px;
height: 9px;
}
.accordion-bral i:before {
transform: translate(-2px, 0) rotate(-45deg);
}
.accordion-bral i:after {
transform: translate(2px, 0) rotate(45deg);
}
使用 glyphicon
源代码,然后使用此代码
Use the glyphicon
source code and then use this code.
/* when input is checked */
.accordion-bral input:checked ~ .ac-label i:after {
content: "\e114"
}
/* when input is not checked */
.accordion-bral input:not(checked) ~ .ac-label i:after {
content: "\e080";
}
.accordion-bral i:after {
font-style: normal; /* change font style too */
font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */
content: "\e114"; /* adjust as needed, taken from bootstrap.css */
float: right; /* adjust as needed */
color: grey;
}
http://jsfiddle.net/7zsbumax/2/
.accordion-bral {
min-height: 0;
min-width: 220px;
width: 100%;
height: 100%;
background-color: #FFF;
margin: 0px!important;
}
.accordion-bral .ac-label {
font-family: Arial, sans-serif;
padding: 5px 20px;
position: relative;
display: block;
height: auto;
cursor: pointer;
color: #777;
line-height: 33px;
font-size: 19px;
background: #EFEFEF;
border: 1px solid #CCC;
}
.accordion-bral .ac-label:hover {
background: #b70000;
color: white;
}
.accordion-bral input+.ac-label {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.accordion-bral input:checked+.ac-label,
.accordion-bral input:checked+.ac-label:active {
background-color: #b70000;
color: #FFF;
box-shadow: 0px 0px 0px 1px rgba(155, 155, 155, 0.3), 0px 2px 2px rgba(0, 0, 0, 0.1);
}
.accordion-bral input.ac-input {
display: none;
}
.accordion-bral .article {
background: white;
overflow: hidden;
height: 20px;
max-height: auto;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.accordion-bral .article p {
color: #777;
line-height: 23px;
font-size: 14px;
padding: 20px;
}
.accordion-bral input:checked~.article i {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.accordion-bral input:checked~.article.ac-content {
height: auto;
}
.accordion-bral i {
text-decoration: none;
margin-top: 16px;
right: 0;
}
.accordion-bral input:checked~.ac-label i:after {
content: "\e114"
}
.accordion-bral input:not(checked)~.ac-label i:after {
content: "\e080";
}
.accordion-bral i:after {
font-style: normal;
font-family: 'Glyphicons Halflings';
/* essential for enabling glyphicon */
content: "\e114";
/* adjust as needed, taken from bootstrap.css */
float: right;
/* adjust as needed */
color: grey;
}
ul.ac-list {
padding-left: 40px;
list-style-type: disc;
}
table.ac-table {
margin: 20px 0 20px 20px;
}
table.ac-table th {
text-align: left;
}
@media (max-width: 550px) {
.accordion-bral .ac-label {
font-family: Arial, sans-serif;
padding: 5px 20px;
position: relative;
display: block;
height: auto;
padding-right: 40px;
cursor: pointer;
color: #777;
line-height: 33px;
font-size: 19px;
background: #EFEFEF;
border: 1px solid #CCC;
}
.accordion-bral i {
position: absolute;
transform: translate(-30px, 0);
margin-top: 2%;
right: 0;
}
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<div class="accordion-bral">
<div>
<!-- accordion item 1 -- start -->
<input class="ac-input" id="ac-1" name="accordion-1" type="checkbox" checked/>
<label class="ac-label" for="ac-1">HTML and CSS only<i></i></label>
<div class="article ac-content">
<h1 style="position: absolute; margin-left:10px;color:#b70000;">HOUTSOORT</h1>
<div class="flex-container">
<div class="card">
<img src="maxopdracht2/eiken-vloer.jpg" style="width:100%">
<div>
<input id="checkbox-1" class="checkbox-custom" style="" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">Eiken</label>
</div>
</div>
<div class="card">
<img src="maxopdracht2/beuken-vloer.jpg" style="width:100%">
<div>
<input id="checkbox-1" class="checkbox-custom" style="" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">Beuken</label>
</div>
</div>
<div class="card">
<img src="maxopdracht2/grenen-vloer.jpg" style="width:100%">
<div>
<input id="checkbox-1" class="checkbox-custom" style="" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">Grenen</label>
</div>
</div>
<div class="card">
<img src="maxopdracht2/maple-vloer.jpg" style="width:100%">
<div>
<input id="checkbox-1" class="checkbox-custom" style="" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">Maple</label>
</div>
</div>
<div class="card">
<img src="maxopdracht2/merbau-vloer.jpg" style="width:100%">
<div>
<input id="checkbox-1" class="checkbox-custom" style="" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">Merbau</label>
</div>
</div>
<div class="card">
<img src="maxopdracht2/onbekend-vloer.jpg" style="width:100%">
<div>
<input id="checkbox-1" class="checkbox-custom" style="" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">Overig/onbekend</label>
</div>
</div>
</div>
</div>
</div>
<!-- accordion item 1 -- end -->
<div>
<!-- accordion item 2 -- start -->
<input class="ac-input" id="ac-2" name="accordion-1" type="checkbox" />
<label class="ac-label" for="ac-2">responsive accordion<i></i></label>
<div class="article ac-content">
</div>
</div>
<!-- accordion item 2 -- end -->
<div>
<!-- accordion item 3 -- start -->
<input class="ac-input" id="ac-3" name="accordion-1" type="checkbox" />
<label class="ac-label" for="ac-3">Divs to divide your things up<i></i></label>
<div class="article ac-content">
</div>
</div>
<!-- accordion item 3 -- end -->
<div>
<!-- accordion item 4 -- start -->
<input class="ac-input" id="ac-4" name="accordion-1" type="checkbox" />
<label class="ac-label" for="ac-4">Forms are cool<i></i></label>
<div class="article ac-content">
</div>
</div>
</div>
如果您想要一些动画,请使用此:
If you want a little animation use this:
.accordion-bral input:checked ~ .ac-label i:after {
/* transform: rotate(90deg); */
transform: rotate(-270deg);
}
.accordion-bral i:after {
content: "\e080";
font-style: normal;
font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */
float: right; /* adjust as needed */
color: grey;
transition: 1s ease-out;
}
这篇关于仅使用CSS切换手风琴字形图标的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!