MDL-单击时，将+图标更改为-？

时间：2018-09-13 13:19:06

标签： javascript html material-design-lite

我有一个使用MDL和JS的手风琴，我想在关闭手风琴，单击并打开它时使用+图标，我想显示减法图标（-）。

我是否需要通过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>

3 个答案:

答案 0 :(得分：1)

以下是解决该问题的一种方法： https://codepen.io/mlzsolti/pen/jvKVpM

基本上，您要做的是在切换手风琴时，还切换标签的右侧图标。这种情况下的一种方法是将元素的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";
        } 
    });
}

答案 1 :(得分：1)

您只需要更改i标签的值即可。例如，要将plus图标转换为minus，应将值更改为remove 

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var icon = this.querySelector("i");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
      icon.innerHTML = "add";
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
      icon.innerHTML = "remove";
    }
  });
}
  #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>

答案 2 :(得分：0)

PURE CSS解决方案（无JS）

在这里有点扩展：https://stackoverflow.com/a/49626209/1920145

尽管如此，我还是努力做到更快...

只需在通常的 material-icons 元素上不添加任何内容，然后使用CSS对其进行调整，以适应所需的CSS情况。在链接中使用了一个复选框。

赞：

input+label>i::before{content:"add_box";}
input:checked+label>i::before{content:"indeterminate_check_box";}
input+label+p+i::before{content:"add_box";}
input:checked+label+p+i::before{content:"indeterminate_check_box";}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
<input type="checkbox" id="myCheck">
<label for="myCheck">Inside the Label: <i class="material-icons"></i></label>
<p>Outside the Label:</p><i class="material-icons"></i>

相关问题
最新问题