如何在清空列表时使用CSS旋转图标

Question

在折叠项目列表时，我无法获得向下旋转的向下箭头字符（图标）并向下旋转。

这是我到目前为止，但显然是行不通的......

.c-accordion li.open .material-icons { 
-webkit-transform: rotate(180deg); 
-ms-transform: rotate(180deg); 
-o-transform: rotate(180deg); 
transform: rotate(180deg); 
transition: all .3s ease; 
} 

我想开属性会解决这个问题，但很可惜。 搜索internt没有提供答案。 任何想法？ 欢迎任何帮助。

var acc = document.getElementsByClassName("js-collapse"); 
 
var i; 
 

 
for (i = 0; i < acc.length; i++) { 
 
    acc[i].onclick = function() { 
 
    this.classList.toggle("active"); 
 
    var panel = this.nextElementSibling; 
 
    if (panel.style.maxHeight){ 
 
     panel.style.maxHeight = null; 
 
    } else { 
 
     panel.style.maxHeight = panel.scrollHeight + "px"; 
 
    } 
 
    } 
 
}

@import url('https://fonts.googleapis.com/icon?family=Material+Icons'); 
 

 
* { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t -webkit-box-sizing: border-box; 
 
\t -moz-box-sizing: border-box; 
 
\t box-sizing: border-box; 
 
} 
 

 
.float-right { 
 
    float: right; 
 
} 
 

 
.c-accordion li.open .material-icons { 
 
    -webkit-transform: rotate(180deg); 
 
    -ms-transform: rotate(180deg); 
 
    -o-transform: rotate(180deg); 
 
    transform: rotate(180deg); 
 
    transition: all .3s ease; 
 
} 
 

 
.c-menu { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 300px; 
 
    border-top: 1px solid #CBCBCB; 
 
    border-left: 1px solid #CBCBCB; 
 
    border-right: 1px solid #CBCBCB; 
 
} 
 
.c-accordion { 
 
    list-style-type: none; 
 
    background-color: #eee; 
 
    color: #444; 
 
    cursor: pointer; 
 
    padding: 5px; 
 
    width: 100%; 
 
    border: none; 
 
    border-bottom: 1px solid #CBCBCB; 
 
    text-align: left; 
 
    outline: none; 
 
    font-size: 15px; 
 
    transition: 0.4s; 
 
} 
 
ul.c-accordion.active, ul.c-accordion:hover { 
 
    background-color: #ddd; 
 
} 
 
.c-submenu { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.c-submenu li { 
 
    border-bottom: 1px solid #CBCBCB; 
 
    padding: 5px; 
 
    cursor: pointer; 
 
} 
 
.c-submenu li:hover { 
 
    background-color: orange; 
 
} 
 
.c-panel { 
 
    background-color: white; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    transition: max-height 0.2s ease-out; 
 
}

<ul class='c-menu'> 
 
    <ul class="c-accordion">Section 1</ul> 
 
    <ul class="c-accordion js-collapse">Section 2<i class="material-icons float-right">keyboard_arrow_down</i></ul> 
 
    <ul class="c-submenu c-panel"> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
     <li>Item 4</li> 
 
    </ul> 
 
    <ul class="c-accordion">Section 3</ul> 
 
</ul>

Answer 1

您需要设定转换两种方式。请尝试以下选择：

var acc = document.getElementsByClassName("js-collapse"); 
 
var i; 
 

 
for (i = 0; i < acc.length; i++) { 
 
    acc[i].onclick = function() { 
 
    this.classList.toggle("active"); 
 
    var panel = this.nextElementSibling; 
 
    if (panel.style.maxHeight){ 
 
     panel.style.maxHeight = null; 
 
    } else { 
 
     panel.style.maxHeight = panel.scrollHeight + "px"; 
 
    } 
 
    } 
 
}

@import url('https://fonts.googleapis.com/icon?family=Material+Icons'); 
 

 
* { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t -webkit-box-sizing: border-box; 
 
\t -moz-box-sizing: border-box; 
 
\t box-sizing: border-box; 
 
} 
 

 
.float-right { 
 
    float: right; 
 
} 
 

 
.c-accordion li.open .material-icons { 
 

 
} 
 

 
ul.c-accordion .material-icons { 
 
    -webkit-transform: rotate(0deg); 
 
    -ms-transform: rotate(0deg); 
 
    -o-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    transition: transform 0.3s ease; 
 
} 
 

 
ul.c-accordion.active .material-icons { 
 
    -webkit-transform: rotate(180deg); 
 
    -ms-transform: rotate(180deg); 
 
    -o-transform: rotate(180deg); 
 
    transform: rotate(180deg); 
 
    transition: transform 0.3s ease; 
 
} 
 

 
.c-menu { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 300px; 
 
    border-top: 1px solid #CBCBCB; 
 
    border-left: 1px solid #CBCBCB; 
 
    border-right: 1px solid #CBCBCB; 
 
} 
 
.c-accordion { 
 
    list-style-type: none; 
 
    background-color: #eee; 
 
    color: #444; 
 
    cursor: pointer; 
 
    padding: 5px; 
 
    width: 100%; 
 
    border: none; 
 
    border-bottom: 1px solid #CBCBCB; 
 
    text-align: left; 
 
    outline: none; 
 
    font-size: 15px; 
 
    transition: 0.4s; 
 
} 
 
ul.c-accordion.active, ul.c-accordion:hover { 
 
    background-color: #ddd; 
 
} 
 
.c-submenu { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.c-submenu li { 
 
    border-bottom: 1px solid #CBCBCB; 
 
    padding: 5px; 
 
    cursor: pointer; 
 
} 
 
.c-submenu li:hover { 
 
    background-color: orange; 
 
} 
 
.c-panel { 
 
    background-color: white; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    transition: max-height 0.2s ease-out; 
 
}

<ul class='c-menu'> 
 
    <ul class="c-accordion">Section 1</ul> 
 
    <ul class="c-accordion js-collapse">Section 2<i class="material-icons float-right">keyboard_arrow_down</i></ul> 
 
    <ul class="c-submenu c-panel"> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
     <li>Item 4</li> 
 
    </ul> 
 
    <ul class="c-accordion">Section 3</ul> 
 
</ul>

Answer 2

你必须通过它.c-accordion.js-collapse.active .material-icons.float-right 这里改变这一行.c-accordion li.open .material-icons低于

             
  
 
   
 
    
var acc = document.getElementsByClassName("js-collapse"); 
 
var i; 
 
for (i = 0; i < acc.length; i++) { 
 
    acc[i].onclick = function() { 
 
    this.classList.toggle("active"); 
 
    var panel = this.nextElementSibling; 
 
    if (panel.style.maxHeight){ 
 
     panel.style.maxHeight = null; 
 
    } else { 
 
     panel.style.maxHeight = panel.scrollHeight + "px"; 
 
    } 
 
    } 
 
}
 
    
@import url('https://fonts.googleapis.com/icon?family=Material+Icons'); 
 

 
* { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t -webkit-box-sizing: border-box; 
 
\t -moz-box-sizing: border-box; 
 
\t box-sizing: border-box; 
 
} 
 

 
.float-right { 
 
    float: right; 
 
} 
 

 
.c-accordion.js-collapse.active .material-icons.float-right{ 
 
-webkit-transform: rotate(180deg); 
 
-ms-transform: rotate(180deg); 
 
-o-transform: rotate(180deg); 
 
transform: rotate(180deg); 
 
transition: all .3s ease; 
 
} 
 

 
.c-menu { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 300px; 
 
    border-top: 1px solid #CBCBCB; 
 
    border-left: 1px solid #CBCBCB; 
 
    border-right: 1px solid #CBCBCB; 
 
} 
 
.c-accordion { 
 
    list-style-type: none; 
 
    background-color: #eee; 
 
    color: #444; 
 
    cursor: pointer; 
 
    padding: 5px; 
 
    width: 100%; 
 
    border: none; 
 
    border-bottom: 1px solid #CBCBCB; 
 
    text-align: left; 
 
    outline: none; 
 
    font-size: 15px; 
 
    transition: 0.4s; 
 
} 
 
ul.c-accordion.active, ul.c-accordion:hover { 
 
    background-color: #ddd; 
 
} 
 
.c-submenu { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.c-submenu li { 
 
    border-bottom: 1px solid #CBCBCB; 
 
    padding: 5px; 
 
    cursor: pointer; 
 
} 
 
.c-submenu li:hover { 
 
    background-color: orange; 
 
} 
 
.c-panel { 
 
    background-color: white; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    transition: max-height 0.2s ease-out; 
 
}
 
    
<ul class='c-menu'> 
 
    <ul class="c-accordion">Section 1</ul> 
 
    <ul class="c-accordion js-collapse">Section 2<i class="material-icons 
 
float-right">keyboard_arrow_down</i></ul> 
 
    <ul class="c-submenu c-panel"> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
     <li>Item 4</li> 
 
    </ul> 
 
    <ul class="c-accordion">Section 3</ul> 
 
</ul>