html - 仅使用 CSS 切换手风琴字形图标
问题描述
嗯,我有一个手风琴菜单,我想更改字形图标,我找到了一些人问同样问题的答案,但没有找到对我有用的答案。可能是因为我不知道在哪里应用代码。
我在 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 */
}
如果有另一种或更简单的方法可以做到这一点,我会全力以赴!:)
解决方案
你可以使用CSS 伪类:not(checked)
来解决这个问题。checked
删除这部分
.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
源代码,然后使用此代码。
/* 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>
更新
如果你想要一个小动画使用这个:
.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;
}
推荐阅读
- wordpress - 如何将 ACF Gutinburg 块数据添加到自定义页面?
- c# - 使用 Automapper 组合目标中的两个字段
- flutter - 如何在颤动中将图像保存在字符串路径中?
- opencv - 用于识别汽车的 HAAR 级联类型图像
- java - 如何按类中的时间戳对 Kotlin 中的 HashMap 进行排序?
- windows - 在 windows docker 容器中使用 qt 安装程序框架
- javascript - 如何在不会影响 gtmetrix 等工具的页面加载的外部 js 小部件上加载
- javascript - 得到错误“socket.io.js:3956 GET http://localhost:3030/socket.io/?EIO=4&transport=polling&t=NfTGefc net::ERR_CONNECTION_REFUSED”
- c++ - 停止在 Visual Studio 2019 中启动实施的异常
- oop - 如何克服 System Verilog 中的函数重载