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>

Answer 2

将以下代码用于简单的javascript

 document.getElementById("content_caract_1").style.display = "none";
document.getElementById("caract1").onclick = function () {
    var carat1 = document.getElementById("content_caract_1");
    if (carat1.style.display === "none") {
        carat1.style.display = "block";
    } else {
        carat1.style.display = "none";
    }
}
document.getElementById("caract1bis").onclick = function () {
    var carat_lbis = document.getElementById("content_caract_1bis");
    if (carat_lbis.style.display === "none") {
        carat_lbis.style.display = "block";
    } else {
        carat_lbis.style.display = "none";
    }
}

<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>

Answer 3

只要您显示的HTML结构在所有div中都保持不变，该方法就可以用于任意数量的div元素。

步骤1：在要添加为可见性切换器的元素上添加CSS类.toggle。

第2步：最初对应该最初隐藏的任何可切换元素设置内联样式。

休息：查看代码。

// get the toggle elements as an HTMLCollection and convert it to an array...
let togglers = Array.from(document.getElementsByClassName('toggle'))

// so we can then use the array method .forEach() on it
togglers.forEach(function (toggler) {
  // for every element in our togglers collection, add a click listener
  toggler.addEventListener('click', function(event) {
    // check if element is visible
    let visible = this.nextElementSibling.style.display !== "none";
    // depending on the currrent visibility, apply either none or block
    this.nextElementSibling.style.display = visible ? "none" : "block";
  })
})

.toggle { cursor: pointer; }

<div id="caract1">
  <h2> Etape 1 : Les enjeux et le parcours </h2>
</div>
<div id="content_caract_1">
  <div id="caract1bis" class="toggle">
    <h3> 1.1 Enjeux du programme apollo </h3>
  </div>
  <div id="content_caract_1bis" style="display: none;">
    <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>

Answer 4

如果要使用纯JavaScript，则将所有XHTML标准应用于html会更容易。

您没有应用的第一个规则是您的div ID应该是唯一的。您可以使用jQuery通过id获取多个元素，但不适用于纯JavaScript。您应该使用类名来实现这一点。

HTML

BUILD_APP = True
SKIP_TESTS = False

if not SKIP_TESTS:
    sbt test

JavaScript

<div class="caract1">
    <h2> Etape 1 : Les enjeux et le parcours </h2>
    </div>
    <div class="content_caract_1">
    <div class="caract1bis">
        <h3> 1.1 Enjeux du programme apollo </h3>
    </div>
    <div class="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>

此外，由于XHTML标准，您应该使用var divs = document.gelElementsByClassName('content_caract_1bis');而不是<br />

将显示div的jQuery转换为纯JS

4 个答案: