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

Question

首先我要说对不起，因为我的英语不是很好，但我会尽力而为。 所以我会向你解释我的问题，我想在用户点击按钮时显示我所有的 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 个这样的 block ，我想单击按钮并显示 block 内的所有内容。

感谢您阅读了我!如果您需要更精确的信息，我会在这里回答。

谢谢 妮可

Answer 1

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

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

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

然后像这样接住所有电话

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