Question

首先，我会说抱歉，因为我的英语不太好，但我会尽力而为。因此，我将向您解释我的问题，我想在用户单击按钮时显示所有div。如果我有很多身份证，那对我来说真的很复杂。就像一个下拉菜单。

我的代码：

$("#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个这样的块，我想单击按钮并显示块中的所有东西。

谢谢你读了我！如果您需要更高的精度，请在这里回答。

谢谢尼科

Answer 1

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

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

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

然后像这样在一个呼叫中全都捕获

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

Answer 2

您要在单击按钮时切换父div，并在页面加载时隐藏其所有子级。只需在页面加载时切换父div。

<script>
$(".forbutton").hide();

//$("#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)
});

Answer 3

$("#content_caract_1").find("div").hide();

$('#btnp').click( function() { // Au clic sur un élément
$("#content_caract_1").find("div").show();// chache ou affiche a une vitesse constante (400)
    });


$('#btnd').click( function() { // Au clic sur un élément
$("#content_caract_1").find("div").hide();// chache ou affiche a une vitesse constante (400)
    });

单击按钮显示多个div

3 个答案: