javascript - 当您单击链接时， Accordion 打开

很长时间以来，我手风琴无法打开。

当您单击链接时，我需要打开手风琴。在我的示例中该如何做？我在您的网站上发现了很多解决问题的方法，但是其中一种方法都不适用。手风琴位于页面底部。

http://elementor.echotag.net

最佳答案

您为此使用Bootstrap。

您可以使用引导程序中的一些预定义类，

阅读有关该here的更多信息

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <div data-toggle="collapse" data-parent="#accordion" data-target="#collapse1">
            Point 1
          </div>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body">
          Your Description for point 1
        </div>
        <div class="panel-footer">
          Footer text goes here for point 1
        </div>
      </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <div data-toggle="collapse" data-parent="#accordion" data-target="#collapse2">
            Point 2
          </div>
        </h4>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">
          Your Description for point 2
        </div>
        <div class="panel-footer">
          Footer text goes here for point 2
        </div>
      </div>
    </div>
  </div>
</body>

</html>

最后，您可以根据需要进行一些样式设置，例如将鼠标悬停在要显示的指针上，显示动画（如果需要）或更改颜色时，请根据需要保持字体大小。

**

  注意：

  我没有打开提供的链接，因为它不安全。

  我的代码在这里说明了如何在页面中添加accordian样式。希望这对您有帮助。

**

关于javascript - 当您单击链接时， Accordion 打开，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58462172/