单击另一个按钮时如何关闭 HTML 中的按钮，以便折叠的文本不会重叠/按钮的数据答案

【问题标题】：How do I close a button in HTML when another button is clicked on so the collapse's text does not overlap/button's data单击另一个按钮时如何关闭 HTML 中的按钮，以便折叠的文本不会重叠/按钮的数据
【发布时间】：2021-04-06 04:28:22
【问题描述】：

正如您在代码中看到的，当您打开第一个按钮和第二个按钮时，它们的数据重叠。我希望它不重叠，所以当第一个按钮的数据打开并且用户点击第二个按钮时，第一个按钮的数据会关闭，所以它不会让人难以阅读。

<!doctype html>
<html lang="en">
  <head>
    <title>Bootstrap Website</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Primary, secondary, success, info, warning, danger, dark, light, link -->
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
<div class="row">
          <button type="button" class="btn btn-primary col-sm-3" data-toggle="collapse" data-target="#demo" id="button0">Simple collapsible</button>
          <button type="button" class="btn btn-primary col-sm-3" data-toggle="collapse" data-target="#demo2" id="button1">Simple collapsible</button>
          <div id="demo2" 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 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>
        <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="app.js"></script>
  </body>
</html>

enter image description here

块引用

【问题讨论】：

标签： html button bootstrap-4

【解决方案1】：

您需要使用我提到的以下代码，它与 div 的 data-parent 和 id parent 一起使用

 <!doctype html>
    <html lang="en">
      <head>
        <title>Bootstrap Website</title>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- Primary, secondary, success, info, warning, danger, dark, light, link -->
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
      </head>
      <body>
    <div class="row" id="accordionExample">
              <button type="button" class="btn btn-primary col-sm-3" data-toggle="collapse" data-target="#demo" id="button0">Simple collapsible</button>
              <button type="button" class="btn btn-primary col-sm-3" data-toggle="collapse" data-target="#demo2" id="button1">Simple collapsible</button>
              <div id="demo2" class="collapse" data-parent="#accordionExample">
                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 id="demo" class="collapse" data-parent="#accordionExample">
                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>
            <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script src="app.js"></script>
      </body>
    </html>

【讨论】：

非常感谢刚刚开始学习引导程序。