Question

我正在尝试拥有多个容器，我需要每个容器都能够折叠并在用户交互时重新打开。目前，我只能打开，但是当我单击“详细信息”时，div不会关闭。

我尝试更改折叠并添加ID，并使数据目标成为ID，但问题仍然相同

链接： https://www.w3schools.com/code/tryit.asp?filename=G4OW7SFO0DYR

Answer 1

请尝试这个。

    <div class="card" id="card0" style="background-color: #c8c372; border:5px solid black;"><div class="description">
    <h4 style="font-size: 25px; text-align: center"><b> Bottled water | $2 </b></h4><h5 style="text-align: center"></h5>
      <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.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <style>
    button{
    padding-left: 40%;
    padding-right: 45%;
    }
    </style>
    <div class="container">
      <button type="button" data-toggle="collapse" data-target="#demo">Details</button>
      <div id="demo" class="collapse multi-collapse">
        Brands of water include: Dasani, Nestle, and Fiji
      </div>
    </div>
    </div><span id="next-content0"></span></div>

    ---------------
    ------------------
    ------------

    <div class="card" id="card0" style="background-color: #c8c372; border:5px solid black;"><div class="description">
    <h4 style="font-size: 25px; text-align: center"><b> Bottled water | $2 </b></h4><h5 style="text-align: center"></h5>
    <div class="container_1">
      <button type="button" data-toggle="collapse" data-target="#demo_1">Details</button>
      <div id="demo_1" class="collapse multi-collapse">
        Brands of water include: Dasani, Nestle, and Fiji
      </div>
    </div>
    </div><span id="next-content0"></span></div>

请在head标签中添加CSS和JS。您不需要到处调用CSS和JS。

HTML5可折叠在多个容器上

1 个答案: