使用 javascript 隐藏和显示文本

Question

我试图通过单击“+”使文本出现和消失，但我似乎无法让它工作。 当我将它应用于其他部分时，第一个不再起作用？

我更愿意为出现的文本设置最大高度，以便您可以滚动阅读所有内容，但我不知道如何以及是否有可能将“+”变成“x”以关闭文本块。

 function myFunction() { var x = document.getElementById("hide"); if (x.style.display === "block") { x.style.display = "none"; } else { x.style.display = "block"; } }

 #hide { display: none; }

 <section> <img src="img/trait8.svg"></img> <h3>Pelvi-p&eacute;rin&eacute;ologie</h3> <p id="hide">Tout d'abord qu'est-ce que la rééducation périnéale ou uro-gynécologie ? C'est un traitement qui consiste en la rééducation des muscles que comporte le plancher pelvien ou périnée. Il vise une prise de conscience par le patient ainsi qu'un renforcement ou relâchement (selon les pathologies) des muscles du périnée par un massage périnéal, biofeedback et l'électrostimulation. La rééducation pelvienne est très différente selon qu'il s'agisse d'une rééducation pour femmes, hommes ou enfants. La périnéologie cible les troubles liés à l'appareil urinaire (uro-gynécologie) et/ou anal (colo-proctologie) Rééducation périnéale chez les femmes Cette rééducation a lieu si il ya une instabilité vésicale (urgences mictionnelles), douleurs au rapports sexuels (dyspareunie), descente d'organe ou prolapsus ( cystocèle, rectocèle, hystrérocèle), incontinence urinaire (différents types) et/ou fécale. Ces troubles peuvent apparaitre à différents moments de la vie et les causes sont multiples ; pratique d'un sport a impact de manière intensive, suite a un accouchement ou au moment de la ménopause, … La rééducation se fait manuellement et avec une sonde vaginale pour permettre le biofeedback et/ou l'électrostimulation. Rééducation périnéale chez les enfants Si au-delà de cinq ans l'enfant fait encore pipi au lit (énurésie), si l'enfant perd de manière involontaire des émissions de selles du a un trop plein dans le rectum (encoprésie) ou si il souffre d'immaturité vésicale (incontinence urinaire le jour/nuit), la rééducation périnéale sera nécessaire. Chez les enfants on n'utilise pas de sondes mais de petites électrodes de surface. Rééducation périnéale chez les hommes Un homme peut également souffrir d'une instabilité vésicale, d'une faiblesse périnéale voir même d'incontinence urinaire/fécale. Cette rééducation trouve souvent lieu suite à une prostatectomie. Le patient peut alors après l'intervention chirurgicale souffrir d'incontinence urinaire. La rééducation se fait manuellement, avec une sonde anale pour permettre le biofeedback et/ou l'électrostimulation. </p> <h5 onclick="myFunction()">&plus;</h5> </section>

Answer 1

像这样 - 选择每个 h5

 window.addEventListener("load", function() { [...document.querySelectorAll("h5")].forEach(function(h5) { h5.addEventListener("click", function(e) { let show = this.innerText === "+" this.previousElementSibling.classList.toggle("show", show); this.innerText = show ? "x" : "+"; }) }) })

 .hide { display: none; } .show { display: block; }

 <section> <img src="img/trait8.svg" /> <h3>Pelvi-p&eacute;rin&eacute;ologie</h3> <p class="hide">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis lacus orci, id imperdiet nulla ultrices consequat. Aliquam imperdiet rhoncus mattis. Nam maximus feugiat felis, tempus vulputate lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla congue urna in arcu varius bibendum. Donec nec velit a justo auctor tincidunt. Nulla posuere augue at ipsum suscipit imperdiet. Proin a accumsan urna. Morbi nunc orci, maximus in pharetra in, blandit sed sem. Fusce ullamcorper nulla nunc, a hendrerit enim imperdiet ac. Nam feugiat nunc ut purus blandit, ac condimentum ante sagittis.</p> <h5>+</h5> </section> <section> <img src="img/trait8.svg" /> <h3>Pelvi-p&eacute;rin&eacute;ologie</h3> <p class="hide">Curabitur sed lectus sed ante dictum sollicitudin. Aliquam volutpat condimentum laoreet. Curabitur sit amet fringilla purus. Cras maximus, nisl eget placerat dignissim, mauris sem ultricies orci, vitae tristique justo purus quis urna. In consectetur justo purus, id aliquam lectus scelerisque ac. Mauris bibendum pulvinar arcu, eu imperdiet ipsum vestibulum ut. Aliquam turpis augue, lacinia ac consequat id, ullamcorper at magna. Ut nec urna scelerisque, facilisis velit nec, feugiat lectus.</p> <h5>+</h5> </section>

Answer 2

将函数更改为：

function myFunction(event) {
    var x = event.target.parentNode.getElementsByTagName("p")[0];
    if (x.style.display === "block") {
        event.srcElement.innerHTML = '+';
        x.style.display = "none";
    } else {
        event.srcElement.innerHTML = 'X';
        x.style.display = "block";
    }
}

将 #hide 更改为 .hide：

.hide {
    display: none;
}

<p class="hide"></p>

并添加事件参数：

<h5 onclick="myFunction(event)">&plus;</h5>