装饰列表时如何使用CSS旋转图标

时间：2017-09-25 15:59:54

标签： css

我无法让一个向下箭头的字符（图标）在展开时向上旋转，并在折叠一个项目列表时向下旋转。

这是我到目前为止所做的，但显然不起作用...... 

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

我认为open属性可以解决这个问题，但是唉。 对实习生的搜索没有提供答案。 有任何想法吗？ 欢迎大家帮忙。

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');

* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	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>

2 个答案:

答案 0 :(得分：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');

* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	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>

答案 1 :(得分：0)

您必须更改此行.c-accordion li.open .material-icons .c-accordion.js-collapse.active .material-icons.float-right 这是下面的结果





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');

* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	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>
相关问题
最新问题