我有一个使用 MDL 和 JS 的 Accordion ，我想在 Accordion 关闭时使用 + 图标，当单击并打开它时我想显示一个减号图标 (-)。
我需要通过 MDL div 或在 JS 中执行此操作吗？我知道我可以放入一些 JS 来更改图标，但不知道如何将其与 MDL 图标链接...
这是我到目前为止所拥有的。
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
} #padButton {
padding: 0px;
background-color: white;
width: 100%;
/* border: 2px; */
/* border-color: red; */
}
/* Style the buttons that are used to open and close the accordion panel */
.accordion {
background-color: rgb(255, 255, 255);
font-family: 'Courier New', Courier, monospace;
font-size: 24px;
color: #444;
cursor: pointer;
padding: 18px;
/* width: 100%; */
text-align: left;
vertical-align: center;
border: 2px;
outline: 2cm;
border-color: #777;
transition: 0.4s;
/* box-shadow: 0 0px 0px 1px rgba(0, 0, 0, 0.1); */
/* border-radius: 2px; */
/* overflow: hidden; */
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.accordion:hover {
background-color: rgb(255, 255, 255);
}
/* Style the accordion panel. Note: hidden by default */
.panel {
padding: 0px 18px;
font-family: 'Courier New', Courier, monospace;
/* background-color: grey; */
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
/* border: 2px; */
box-shadow: 0 0px 0px 1px rgba(0, 0, 0, 0.05);
}
.panel:after {
padding: 10px 18px;
}
.accordion:after {
/* content: '\02795'; Unicode character for "plus" sign (+) */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.grey-amber.min.css" />
</head>
<div id="padButton" class="mdl-cell mdl-cell--6-col">
<div class="accordion">Accordion Section 1
<div align="right">
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect mdl-button--colored">
<i class="material-icons">add</i>
</button>
</div>
</div>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed feugiat lectus. Phasellus maximus, ex nec bibendum volutpat, justo erat pellentesque massa, vel malesuada sem lectus tincidunt orci. Aenean eleifend est sit amet dapibus ullamcorper.
Nam ornare finibus ex vitae interdum. Sed quis purus eros. Sed ut porttitor dolor, eget ultrices justo. Sed eu leo porta, mattis libero eu, sagittis metus. Vivamus nec lobortis nisi. Suspendisse posuere enim arcu, at interdum dui congue vitae. Aliquam
vestibulum accumsan magna. Vivamus a arcu nunc. Cras euismod lacinia augue sed elementum. Phasellus dignissim semper mi at sollicitudin. Vivamus maximus semper nulla. Donec luctus, dolor non viverra aliquam, enim arcu imperdiet sem, et pretium dui
ante ac lectus.</p>
</div>
</div>最佳答案
这是解决该问题的一种方法的代码: https://codepen.io/mlzsolti/pen/jvKVpM
基本上，您要做的就是当您切换 Accordion 时，还要切换标签的右侧图标。本例中的方法之一是将元素的innerHTML 设置为所需图标的名称。
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
var icon = this.querySelector("i");
if (this.classList.contains("active")) {
icon.innerHTML = "remove";
} else {
icon.innerHTML = "add";
}
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
关于javascript - MDL - 单击时将 + 图标更改为 - ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52314636/