当您在Javascript中单击V形时，如何将V形从指向右变为指向下？
[英]How to change a chevron from pointing right to pointing down when you click on it in Javascript?
问题描述
I am getting the chevron-down icon from https://fontawesome.com/icons/chevron-down and the chevron-right icon from https://fontawesome.com/icons/chevron-right .
我从https://fontawesome.com/icons/chevron-down获取 chevron-down 图标，从https://fontawesome.com/icons/chevron-right获取 chevron-right 图标。 I am unsure of where to start to make it so that when you click on the SHOW LESS text, it will change into SHOW MORE and the chevron will change into a chevron-right.我不确定从哪里开始制作，这样当您单击 SHOW LESS 文本时，它将变为 SHOW MORE 并且 V 形将变为 V 形右。
Also, how do you make it so that the content also appears below SHOW LESS when you have clicked on it?另外，当您单击内容时，如何使内容也显示在 SHOW LESS 下方？
3 个解决方案
解决方案1
4 2019-12-08 07:40:47
Use the HTML5 details element, which使用 HTML5 details元素，该元素
- is the semantically correct element here,是这里语义正确的元素，
- does not require any Javascript,不需要任何Javascript，
- is compatible with screen readers as part of the HTML standard,作为 HTML 标准的一部分，与屏幕阅读器兼容，
- does not even require font awesome because it already comes with a chevron that does exactly what you're asking for.甚至不需要很棒的字体，因为它已经带有一个 V 字形，可以完全满足您的要求。
.restyled summary { text-transform: uppercase; } .restyled summary::marker { content: "› "; } .restyled summary::-webkit-details-marker { content: "› "; }
<details> <summary>Show more</summary> <p>More info about the details.</p> </details> <details class="restyled"> <summary>Show more</summary> <p>More info about the details.</p> </details>
https://developer.mozilla.org/de/docs/Web/HTML/Element/details
解决方案2
1 2019-12-08 07:47:40
A quick possible start.一个可能的快速开始。
document.querySelectorAll(".arrow").forEach(function(e){ e.addEventListener("pointerdown",function(){ toggleArrow(e.id) } ,false) }) function toggleArrow(e){ if (document.getElementById(e).className === "arrow show"){ document.getElementById(e).className = "arrow hide" } else { document.getElementById(e).className = "arrow show" } }
.arrow{ font-size: 2rem; cursor: pointer } .show::before{ content: "⇩" } .hide::before{ content: "⇨" }
<div id="arrow1" class="arrow hide">MORE</div> <div id="arrow2" class="arrow hide">MORE</div> <div id="arrow3" class="arrow hide">MORE</div>
解决方案3
0 2019-12-08 07:24:01
here is the solution.这是解决方案。 run this.运行这个。
function toggle(){ var chevElement = document.getElementById('chevron'); var button = document.getElementById('toggle-button'); if( chevElement.className.includes('right')){ button.innerHTML = 'Show Less     <i id="chevron" class="fas fa-chevron-down"></i>'; } else if(chevElement.className.includes('down')){ button.innerHTML = 'Show More   <i id="chevron" class="fas fa-chevron-right"></i>'; } }
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous"> </head> <body> <div class="container"> <h2>Simple Collapsible</h2> <p>Click on the button to toggle between showing and hiding content.</p> <button id='toggle-button'type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo" onclick="toggle()">Show More   <i id="chevron" class="fas fa-chevron-right"></i></button> <div id="demo" class="collapse"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.