在这里，为什么切换方法不起作用？我正在尝试运行自定义函数并在纯 JavaScript 中循环此函数。我期待 Jquery 切换。单击标题时，然后添加dsplyBlck到它的子文章，dsplyBlck当重新单击标题时，将其删除到它的子文章。window.onload = function(){ var hdr = document.querySelectorAll('header'); for(var i=0; i<hdr.length; i++){ hdr[i].onclick = function(){ var elm = this.closest('section').querySelector('article'); tgglArticle(elm,this); } }}function tgglArticle(elm, hdr){ elm.classList.add('dsplyBlck'); hdr.addEventListener('click',function(){ console.log('Here message is displaying, but remove class not working'); elm.classList.remove('dsplyBlck'); tgglArticle(elm,hdr); })}.dsplyNne{ display:none;}.crsr{ cursor:pointer;}.dsplyBlck{ display:block;}<section> <header class='crsr'> Header </header> <article class='dsplyNne'> Details </article></section><section> <header class='crsr'> Header </header> <article class='dsplyNne'> Details </article></section>
3 回答
呼啦一阵风
TA贡献1802条经验 获得超6个赞
我已经重写了javascript。源文件中的文档。
window.onload = () => {
// Capture the header elements in an array
const hdr = [...document.querySelectorAll('header')];
// Add an eventlistener for each header element
hdr.map( (h) => {
h.addEventListener( "click", (e) => {
// Toggle the class for the next sibling (article)
const t = e.currentTarget.nextElementSibling;
t.classList.toggle("dsplyNne");
});
});
}
.dsplyNne {
display: none;
}
.crsr {
cursor: pointer;
}
.dsplyBlck {
display: block;
}
<section>
<header class='crsr'>
Header
</header>
<article class='dsplyNne'>
Details
</article>
</section>
<section>
<header class='crsr'>
Header
</header>
<article class='dsplyNne'>
Details
</article>
</section>
明月笑刀无情
TA贡献1828条经验 获得超4个赞
解决方案：
function toggleElm(elem) {
let x = document.getElementById(elem);
if (x.classList.contains('dsplyBlck')) {
x.classList.add('dsplyNne');
x.classList.remove('dsplyBlck');
} else {
x.classList.add('dsplyBlck');
x.classList.remove('dsplyNne');
}
}
<html>
<head>
<style>
.dsplyNne{
display:none;
}
.crsr{
cursor:pointer;
}
.dsplyBlck{
display:block;
}
</style>
</head>
<body>
<section>
<header class='crsr' onclick="toggleElm('target1')">
Header
</header>
<article class='dsplyNne' id="target1">
Details
</article>
</section>
<section>
<header class='crsr' onclick="toggleElm('target2')">
Header
</header>
<article class='dsplyNne' id="target2">
Details
</article>
</section>
</body>
</html>
缥缈止盈
TA贡献2041条经验 获得超4个赞
您只需使用Element.classList.toggle('YOUR_CLASS')( doc )来简化这些
window.onload = function() {
var hdr = document.querySelectorAll('header');
for (var i = 0; i < hdr.length; i++) {
hdr[i].onclick = function() {
var elm = this.closest('section').querySelector('article');
elm.classList.toggle('dsplyBlck');
}
}
}
<html>
<head>
<style>
.dsplyNne {
display: none;
}
.crsr {
cursor: pointer;
}
.dsplyBlck {
display: block;
}
</style>
</head>
<body>
<section>
<header class='crsr'>
Header
</header>
<article class='dsplyNne'>
Details
</article>
</section>
<section>
<header class='crsr'>
Header
</header>
<article class='dsplyNne'>
Details
</article>
</section>
</body>
</html>
添加回答
举报
0/150
提交
取消