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