Question

如果我点击另一个，我想关闭已打开的div。如果我打开一个并打开另一个仍然打开。我试过data-collapse-group但没有奏效。我使用bootstrap崩溃但我没有找到任何提示提示我怎么能解决这个

这是我的代码：

        <!--válasszon-->
<div class="container" id="choose">
  <div class="container">
    <div class="row">
      <div class="col-md-12" style="text-align:center;">
        <p class="title" style="color:#0eb493">VÁLASSZON!</p>
        <img src="img/chooselogo.png" style="width:300px;margin-bottom:70px;">
      </div>
    </div>
    <div class="row"style="margin-bottom:60px;">
      <div class="col-md-4 choosehover" data-toggle="collapse" href="#collapsedoc" aria-expanded="false" aria-controls="collapseExample">
        <p class="choosetitel"><img src="img/doc.png" style="margin-right:10px;padding-top:20px;">A4 / A3 dokumentum nyomtatás</p>
        <p class="choosecontent">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore</p>
      </div>
      <div class="col-md-4 choosehover" data-toggle="collapse" href="#collapsenevjegykartya" aria-expanded="false" aria-controls="collapseExample">
      <p class="choosetitel"><img src="img/nevjegykartya.png" style="margin-right:10px;padding-top:20px;">Névjegykártya</p>
      <p class="choosecontent">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore</p>
      </div>
      <div class="col-md-4 choosehover" data-toggle="collapse" href="#collapseszorolap" aria-expanded="false" aria-controls="collapseExample">
      <p class="choosetitel"><img src="img/szorolap.png" style="margin-right:10px;padding-top:20px;">Szórólap</p>
      <p class="choosecontent">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore</p>
      </div>
    </div>
    <div class="row" style="margin-bottom:70px;">
      <div class="col-md-4 choosehover" data-toggle="collapse" href="#collapseplakat" aria-expanded="false" aria-controls="collapseExample">
      <p class="choosetitel"><img src="img/plakat.png" style="margin-right:10px;padding-top:20px;">Plakát</p>
      <p class="choosecontent">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore</p>
      </div>
      <div class="col-md-4 choosehover" data-toggle="collapse" href="#collapsecegeslevp" aria-expanded="false" aria-controls="collapseExample">
      <p class="choosetitel"><img src="img/cegeslevp.png" style="margin-right:10px;padding-top:20px;">Céges levélpapír</p>
      <p class="choosecontent">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore</p>
      </div>
      <div class="col-md-4 choosehover" data-toggle="collapse" href="#collapseetikett" aria-expanded="false" aria-controls="collapseExample">
      <p class="choosetitel"><img src="img/etikett.png" style="margin-right:10px;padding-top:20px;">Etikettek</p>
      <p class="choosecontent">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore</p>
      </div>
    </div>
  </div>
</div>

<!--collapsedoc-->
<div class="collapse" id="collapsedoc">

    doc

</div>
<!--nevjegykartya-->
<div class="collapse" id="collapsenevjegykartya">

    nevjegy

</div>
<!--szorolap-->
<div class="collapse" id="collapseszorolap">

    szorolap

</div>
<!--plakat-->
<div class="collapse" id="collapseplakat">

    plakat

</div>
<!--ceges levelpapir-->
<div class="collapse" id="collapsecegeslevp">

    cegeslevp

</div>
<!--etikett-->
<div class="collapse" id="collapseetikett">

    etikett

</div>

我应该编写自定义javascript还是我能用bootstrap解决？

Answer 1

就像这样你需要.. Check this DEMO

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">A4 / A3 dokumentum nyomtatás
             </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
           </div>
    </div>
  </div>
     <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">Névjegykártya
             </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
           </div>
    </div>
  </div>
     <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree">Szórólap
             </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
           </div>
    </div>
  </div>
</div>

如果另一个打开引导程序，则关闭div

1 个答案: