javascript - 使用 javascript 隐藏和显示文本
问题描述
我试图通过单击“+”使文本出现和消失,但我似乎无法使其工作。当我将它应用于其他部分时,第一个不再起作用了吗?
我更愿意为出现的文本设置一个最大高度,这样你就可以滚动阅读所有内容,但我不知道如何以及是否有可能将“+”变成“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ériné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 y a 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()">+</h5>
</section>
解决方案
像这样 - 选择每个 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ériné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ériné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>
推荐阅读
- python - 如何将 XYZ 颜色空间更改为 RGB 0-255
- python - 从两个文件中获取相同行的更优化方法(在 Python 中)
- javascript - 使用 React 更改列表顺序的 CSS 动画
- php - 在文本文件的特定对象中查找两个模式
- r - tidyverse 过滤中的“For”循环
- c++ - C++哪里写一个类的函数?
- mysql - 如何在 AWS Aurora RDS 中安排或触发 SQL 过程?
- python - 将python2的版本更改为python3时出现问题
- json - SWIFT 5 中的嵌套 JSON
- docker - 如何将多阶段 docker 映射到多个 Jenkins 阶段