Question

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

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

http://elementor.echotag.net

Answer 1

为此您使用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样式。希望对您有帮助。

**

当您单击链接时，手风琴打开

1 个答案: