javascript - 将显示 div 的 jQuery 转换为纯 JS

Question

我用 jQuery 编写了显示内容中所有 div 的代码，但我的老板不想加载 jQuery 库，只想使用 Javascript。

这就是我来这里的原因。我会向您解释我的代码

$("#content_caract_1").hide();
$('#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)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="caract1">
  <h2> Etape 1 : Les enjeux et le parcours </h2>
</div>
<div id="content_caract_1">
  <div id="caract1bis">
    <h3> 1.1 Enjeux du programme apollo </h3>
  </div>
  <div id="content_caract_1bis">
    <p>
      <strong>BRAVO !</strong></br>
      </br>
      Vous êtes bien inscrit au parcours « excellence opérationnelle » qui se compose de 3 grandes étapes. Chacune de ces étapes à une durée de 1 à 2 mois.</br>
      </br>
      <strong>VOTRE DÉFI DE LA SEMAINE :</strong></br>
  </div>
</div>

真正的问题是我有大约 20 个要打开和关闭的 div。我们如何在纯 JS 中做同样的事情？

Answer 1

我建议使用通用类而不是 id的和使用 hide如果直接更改样式，则改为类。

注意:只是一边不是</br>必须是 <br> .

var titles = document.querySelectorAll('.title');

for (var i = 0; i < titles.length; i++) {
  titles[i].addEventListener('click', toggleDisplay);
}

function toggleDisplay() {
  event.stopPropagation();

  this.nextElementSibling.classList.toggle('hide');
}

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="title">
  <h2> Etape 1 : Les enjeux et le parcours </h2>
</div>
<div class="toggled_div hide">
  <div class="title">
    <h3> 1.1 Enjeux du programme apollo </h3>
  </div>
  <div class="toggled_div">
    <p>
      <strong>BRAVO !</strong>
      <br>
      <br> Vous êtes bien inscrit au parcours « excellence opérationnelle » qui se compose de 3 grandes étapes. Chacune de ces étapes à une durée de 1 à 2 mois.<br>
      <br>
      <strong>VOTRE DÉFI DE LA SEMAINE :</strong>
      <br>
  </div>
</div>

<div class="title">
  <h2> Etape 2 : Les enjeux et le parcours </h2>
</div>
<div class="toggled_div hide">
  <div class="title">
    <h3> 2.1 Enjeux du programme apollo </h3>
  </div>
  <div class="toggled_div">
    <p>
      <strong>BRAVO !</strong>
      <br>
      <br> Vous êtes bien inscrit au parcours « excellence opérationnelle » qui se compose de 3 grandes étapes. Chacune de ces étapes à une durée de 1 à 2 mois.<br>
      <br>
      <strong>VOTRE DÉFI DE LA SEMAINE :</strong>
      <br>
  </div>
</div>

<div class="title">
  <h2> Etape 3 : Les enjeux et le parcours </h2>
</div>
<div class="toggled_div hide">
  <div class="title">
    <h3> 3.1 Enjeux du programme apollo </h3>
  </div>
  <div class="toggled_div">
    <p>
      <strong>BRAVO !</strong>
      <br>
      <br> Vous êtes bien inscrit au parcours « excellence opérationnelle » qui se compose de 3 grandes étapes. Chacune de ces étapes à une durée de 1 à 2 mois.<br>
      <br>
      <strong>VOTRE DÉFI DE LA SEMAINE :</strong>
      <br>
  </div>
</div>