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 个答案: