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

Question

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

我需要通过 MDL div 还是在 JS 中执行此操作？我知道我可以放入一些 JS 来更改图标，但不确定如何 link 它与 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: '795'; 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>

Answer 1

这是其中一种解决方法的codepen： 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";
        } 
    });
}

Answer 2

您只需更改 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: '795'; 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>

Answer 3

这是一种逻辑完全在 CSS 中的方法。这意味着您只需更改 CSS 即可更改使用的图标，而不必触摸 HTML 或 JavaScript。

在 HTML 中，将按钮更改为：

<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"><span class=buttontoggle></span></i>
</button>

你基本上只有一个空跨度。 CSS 将填写正确的内容。

在 CSS 中，添加这些规则以根据 active class 的存在来决定内容：

.accordion.active  .buttontoggle::after {
  content: "remove"
}
.accordion:not(.active)  .buttontoggle::after {
  content: "add"
}

当 buttontoggle 跨度位于 accordian 与 active class.

内时，在其后插入 "remove"

在没有 active class.

的 accordian 内时，在按钮切换范围后插入 "add"

代码笔：https://codepen.io/anon/pen/Kxeaxe

Answer 4

PURE CSS 解决方案（无 JS）

在这里发现有点扩展：

尽管如此，我设法更快地做到了...

简单地在您常用的 material-icons 元素上添加 NO CONTENT，并针对 CSS 的情况使用 CSS 进行调整想。在 link 中使用了一个复选框。

像这样：

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>

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

MDL - Change + icon to - when clicked?

javascript

html

material-design-lite

PURE CSS 解决方案（无 JS）