Question

我正在使用W3schools e xample code获取带有按钮的可折叠文本，如下所示：

<div class="container">
  <h2>Simple Collapsible</h2>
  <p>Click on the button to toggle between showing and hiding content.</p>
  <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
  <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>

我正在尝试使用多个可折叠按钮，但是当我创建第二个按钮时，它会打开第一个可折叠文本。

任何帮助都会受到赞赏，因为我对HTML的理解非常有限。

Answer 1

此样本（如下）可能有所帮助。原始代码来自您引用的W3Schools page。

请注意，第二个按钮的data-target引用第二个可折叠div的ID demo2，而不是第一个可折叠div的ID demo。

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

<div class="container">
  <h2>Simple Collapsible</h2>
  <p>Click on the button to toggle between showing and hiding content.</p>
  <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
  <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>

  <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo2">Simple collapsible 2</button>
  <div id="demo2" class="collapse">
    2nd
  </div>
</div>

</body>
</html>

Answer 2

为此，您需要使用id指定第二个目标div data-target。

<div class="container">
  <h2>Simple Collapsible</h2>
  <p>Click on the button to toggle between showing and hiding content.</p>
  <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible 1</button>
  <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo2">Simple collapsible 2</button>
  <div id="demo2" class="collapse">
    collapsible 2
  </div>
  <div id="demo" class="collapse">
    Collapsible 1
  </div>
</div>

为简洁起见，我省略了该示例的头部。

Answer 3

每个可折叠的div都应该有一个唯一的ID，应该链接到它的相应按钮data-target，如下所示：

<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#button1">Simple collapsible</button>
  <div id="button1" 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>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#button2">Simple collapsible</button>
  <div id="button2" 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（＃button1，＃button2）？这就是按钮如何知道要定位哪个div。

Answer 4

试试这个：

＆＃13;

$('.btn').click(function() {
  $(this).next().slideToggle(400);
});

＆＃13;

.btn {
  display: inline-block;
  cursor: pointer;
  padding: 5px;
  border: 1px solid #DDD;
  border-radius: 3px;
  margin: 5px 0;
}
.content {
  display: none;
  padding: 10px;
  background: #EAEAEA;
  border: 1px solid #DDD;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="container-toggle">
  <div class="box">
    <div class="btn">Some Text Button</div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda impedit, numquam id vero velit dolorem tempora quas? Ad possimus dolor nemo repudiandae. Facere, magnam, necessitatibus? Est, odio tempore provident in!</div>
  </div>

  <div class="box">
    <div class="btn">Another Text</div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda impedit, numquam id vero velit dolorem tempora quas? Ad possimus dolor nemo repudiandae. Facere, magnam, necessitatibus? Est, odio tempore provident in!</div>
  </div>

  <div class="box">
    <div class="btn">Another Button</div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda impedit, numquam id vero velit dolorem tempora quas? Ad possimus dolor nemo repudiandae. Facere, magnam, necessitatibus? Est, odio tempore provident in!</div>
  </div>

  <div class="box">
    <div class="btn">Some Lorem Ipsum</div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda impedit, numquam id vero velit dolorem tempora quas? Ad possimus dolor nemo repudiandae. Facere, magnam, necessitatibus? Est, odio tempore provident in!</div>
  </div>
</div>

＆＃13;

使用多个HTML可折叠

4 个答案: