MDL - 单击时将 + 图标更改为 -？
[英]MDL - Change + icon to - when clicked?
问题描述
I have an accordion in place using MDL and JS, I would like to use the + icon when the accordion is closed and when it is clicked and open I would like to display a subtract icon (-).
我有一个使用 MDL 和 JS 的手风琴，我想在手风琴关闭时使用 + 图标，当它被单击并打开时，我想显示一个减法图标 (-)。
Would I need to do this through the MDL divs or within the JS?我是否需要通过 MDL div 或在 JS 中执行此操作？ I know I can put in some JS which will change the icon but not sure how to link it with the MDL icons...我知道我可以放入一些 JS 来改变图标，但不确定如何将它与 MDL 图标链接...
Heres what I have so far.这是我到目前为止所拥有的。
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>
4 个解决方案
解决方案1
1 已采纳 2018-09-13 13:50:33
Here is the codepen of one of the ways to solve it: https://codepen.io/mlzsolti/pen/jvKVpM这是解决它的方法之一的codepen： https ://codepen.io/mlzsolti/pen/jvKVpM
Basically, what you have to do, is when you toggle the accordion, also toggle the right icon of the tag.基本上，您必须做的是，当您切换手风琴时，还要切换标签的正确图标。 One of the methods in this case is to set the element's innerHTML to the desired icon's name.这种情况下的一种方法是将元素的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";
}
});
}
解决方案2
1 2018-09-13 13:52:01
You just need to change the value of i tag.您只需要更改i标签的值。 For example, to convert plus icon to minus you should change the value to remove例如，要将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>
解决方案3
0 2018-09-13 14:07:54
This is an approach where the logic is completely in the CSS.这是一种逻辑完全在 CSS 中的方法。 This means you can change what icon is used by only changing the CSS, not having to touch the HTML or JavaScript.这意味着您只需更改 CSS 即可更改所使用的图标，而无需接触 HTML 或 JavaScript。
In the HTML, change the button to this:在 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>
You basically just have an empty span.你基本上只有一个空跨度。 The CSS will then fill in the correct content. CSS 然后将填写正确的内容。
In the CSS, add these rules to decide the content based on the presence of the active class:在 CSS 中，添加这些规则以根据active类的存在来决定内容：
.accordion.active .buttontoggle::after {
content: "remove"
}
.accordion:not(.active) .buttontoggle::after {
content: "add"
}
Insert "remove" after the buttontoggle span when it is inside an accordian with the active class.当 buttontoggle 跨度位于具有active类的accordian内时，在按钮切换跨度之后插入“删除”。
Insert "add" after the buttontoggle span when it is inside an accordian without the active class.当它在没有active类的accordian内时，在 buttontoggle span 之后插入“add”。
Codepen: https://codepen.io/anon/pen/Kxeaxe代码笔： https ://codepen.io/anon/pen/Kxeaxe
解决方案4
0 2019-09-12 01:36:57
PURE CSS solution (No JS)纯 CSS 解决方案（无 JS）
Found in here a bit extended: https://stackoverflow.com/a/49626209/1920145在这里发现有点扩展： https : //stackoverflow.com/a/49626209/1920145
Nevertheless I mannaged to do it even quicker...尽管如此，我还是设法做得更快......
Simply put NO CONTENT on your usual material-icons element, and adjust it with CSS for the CSS case you may want.只需将 NO CONTENT 放在您常用的材质图标元素上，然后使用 CSS 调整它以适应您可能需要的 CSS 案例。 In the link a checkbox is used.在链接中使用了一个复选框。
Like this:像这样：
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.