时间戳

首页 > 解决方案 > 单击按钮时显示多个 div

javascript - 单击按钮时显示多个 div

问题描述

首先我会说对不起，因为我的英语不是很好，但我会尽力而为。因此，我将向您解释我的问题，当用户单击按钮时，我想显示我的所有 div。这对我来说真的很复杂，因为有很多 id。这就像一个下拉菜单。

我的代码：

$("#content_caract_1").hide();
$("#content_caract_2").hide();
$("#content_caract_3").hide();
$("#content_caract_4").hide();
$('#btnd').click(function() { // Au clic sur un élément
  $(".forbutton").toggle(400); // chache ou affiche a une vitesse constante (400)
});
$('#caract1').click(function() { // Au clic sur un élément
  $("#content_caract_1").toggle(400); // chache ou affiche a une vitesse constante (400)
});
$('#caract1bis').click(function() { // Au clic sur un élément
  $("#content_caract_1bis").toggle(400); // chache ou affiche a une vitesse constante (400)
});
$('#caract1bis2').click(function() { // Au clic sur un élément
  $("#content_caract_1bis2").toggle(400); // chache ou affiche a une vitesse constante (400)
});
$('#caract1bis3').click(function() { // Au clic sur un élément
  $("#content_caract_1bis3").toggle(400); // chache ou affiche a une vitesse constante (400)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="btnp" value="Tout plié">
<input type="button" id="btnd" value="Tout déplié">
<div id="caract1">
  <h2>Etape 1 : Les enjeux et le parcours</h2>
</div>
<div class="forbutton">
  <div id="content_caract_1">
    <p>Equitis Romani autem esse filium criminis loco poni ab accusatoribus neque his iudicantibus oportuit neque defendentibus nobis. Nam quod de pietate dixistis, est quidem ista nostra existimatio, sed iudicium certe parentis; quid nos opinemur, audietis
      ex iuratis; quid parentes sentiant, lacrimae matris incredibilisque maeror, squalor patris et haec praesens maestitia, quam cernitis, luctusque declarat.</p>
    <div id="caract1bis">
      1.1 Enjeux du programme Appolo</br>
    </div>
    <div id="content_caract_1bis">
      <p>test</p>
    </div>
    <div id="caract1bis2">
      1.2 Retour d'experience</br>
    </div>
    <div id="content_caract_1bis2">
      <p>test</p>
    </div>
    <div id="caract1bis3">
      1.3 Votre parcours
    </div>
    <div id="content_caract_1bis3">
      <p>test</p>
    </div>
  </div>
</div>

像这样有 4 个块，我想单击按钮并显示块内的所有内容。

感谢您阅读了我！如果您需要更精确，我在这里回答。

谢谢尼科

标签： javascriptjqueryhtml

解决方案

您可以为“可切换”所需的所有内容分配一个类

<div class="toggable">
  one
</div>
<div class="toggable">
  two
</div>

<button id="hide-stuff">
  toggle
</button>

然后像这样接听电话

$('#hide-stuff').click(function() {
    $('.toggable').toggle();
})

推荐阅读