通过js上下更改手风琴箭头

Question

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css"> </head> <body> <div class="container"> <h2>Heading</h2> <a href="#demo" data-toggle="collapse">Accordion <i class="fas fa-chevron-down"></i></a> <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> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </body> </html>

I am using bootstrap accordion in my project, while clicking on the arrow button it is not changing. 我在项目中使用自举式手风琴，但单击箭头按钮时它没有改变。 I want, when accordion remains collapse arrow head should be down, when it expands arrow heads should be in the upper direction. 我希望，当手风琴保持折叠状态时，箭头应朝下，当手风琴展开时，箭头应朝上。 Below is my codepen url. 以下是我的Codepen网址。 Thanks in advance. 提前致谢。

https://codepen.io/makhan196/pen/VJPNgd https://codepen.io/makhan196/pen/VJPNgd

<a href="#demo" data-toggle="collapse">Accordion <i class="fas fa-chevron-down"></i></a>
  <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>

Answer 1

You can try something like this with Jquery,hope it helps 您可以尝试使用Jquery这样的东西，希望它会有所帮助

 $("a[href$='#demo']").click(function() { let attr = $("#demo").attr("class"); if (attr=="collapse show") { $("i").removeClass("fas fa-chevron-up"); $("i").addClass("fas fa-chevron-down"); } else { $("i").removeClass("fas fa-chevron-down"); $("i").addClass("fas fa-chevron-up"); } })

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css"> </head> <body> <div class="container"> <h2>Heading</h2> <a href="#demo" data-toggle="collapse">Accordion <i class="fas fa-chevron-down"></i></a> <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> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </body> </html>

通过js上下更改手风琴箭头

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-06-21 11:51:15

通过js上下更改手风琴箭头

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-06-21 11:51:15

解决方案1
0 已采纳 2019-06-21 11:51:15