仅使用 CSS 切换手风琴字形图标

【问题标题】：Toggle accordion Glyph Icon with CSS only仅使用 CSS 切换手风琴字形图标
【发布时间】：2019-06-06 09:42:34
【问题描述】：

嗯，我有一个手风琴菜单，我想更改字形图标，我找到了一些人们提出相同问题的答案，但没有找到对我有用的答案。可能是因为我不知道在哪里应用代码。

我在 Jsfiddle 中的菜单：

http://jsfiddle.net/3wt0ehcj/

我尝试进入的字形图标：

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 */
}

如果有其他或更简单的方法可以做到这一点，我会全力以赴！ :)

【问题讨论】：

  • 点击时可以使用Javascript/Jquery切换类
  • 你能在哪里实现它？
  • @thanveershah，我已经查找了如何使用 jquery 进行操作，但没有找到我理解的内容。但是我只需要把css代码放在我自己的某个地方，就是找不到。
  • 如果你愿意，我可以使用 JQuery 创建一个
  • 图标是用CSS创建的

标签： html css


【解决方案1】：

第一步：

您是否在 HTML 文件中包含 Gryphicons 的链接？您需要在<head> 标记内写入以下链接。通常在<meta> 标签之后。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

第二步：

标签当然应该包含如下内容：

<p class="panel-heading"></p>

第三步：你的 CSS 代码应该在 &lt;style&gt; 标签内。 （如果不在 .css 文件中）

在此处阅读更多信息：https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp

【讨论】：

    【解决方案2】：

    你需要调整这部分代码：

    .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);
}

    这样的：

    .accordion-bral input:checked ~ .ac-label i:before {
  content: "+"; /*Icon for the opened state*/

}

.accordion-bral i:before {
  content: "-"; /*Icon for the closed state*/
}

    同时删除与 :after 元素相关的 CSS。

    以 Font Awesome 为例的完整代码：

    .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 {
  position: absolute;
  transform: translate(-30px, 0);
  margin-top: 16px;
  right: 0;
    font-style: initial;
}
.accordion-bral input:checked ~ .ac-label i:before {
  content: "\f078";
  
}

.accordion-bral i:before {
  content: "\f054";
  position: absolute;
  top:-15px;
  font-family:"Font Awesome 5 Free";
  font-weight:900;
}

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 rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" >
<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>

    【讨论】：

    • 这些是 + & - 图标。但是我在信息中输入的代码笔已将向上箭头替换为 >，这就是我想要的。
    • @J.Coderino 我知道，我使用 +/- 来简化代码，现在只需替换​​为您想要的任何图标。我展示了如何调整（检查 sn-p）
    【解决方案3】：

    您可以使用:not(checked) 和checked CSS 伪类来解决这个问题。

    1. not()
    2. 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 source 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>

    更新

    如果你想要一个小动画，使用这个：

    .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;
}

    http://jsfiddle.net/2eLb3ju7/

    【讨论】：

    • @J.Coderino 欢迎您。更新了答案。
    猜你喜欢
    • 2016-04-04
    • 2020-10-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-05-23
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode