通过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>

我在项目中使用自举式手风琴，但单击箭头按钮时它没有改变。 我希望，当手风琴保持折叠状态时，箭头应朝下，当手风琴展开时，箭头应朝上。 以下是我的Codepen网址。 提前致谢。

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

您可以尝试使用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