[英]Expand/hide collapsible using javascript
I want to implement expandable menu. 我想实现可扩展菜单。 Only one heading should be expanded.
只应扩展一个标题。 When user clicks on another one, content of the previously expanded heading should hide.
当用户点击另一个时,先前展开的标题的内容应该隐藏。 I have used code from w3schools, but I don't know how to automatically hide previous heading.
我使用过w3schools的代码,但我不知道如何自动隐藏上一个标题。
var coll = document.getElementsByClassName("collapsible"); var i; for (i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function() { this.classList.toggle("active"); var content = this.nextElementSibling; if (content.style.display === "block") { content.style.display = "none"; } else { content.style.display = "block"; } }); }
<h2>Collapsibles</h2> <p>A Collapsible:</p> <button class="collapsible">Open Collapsible</button> <div class="content"> <p>text</p> </div> <p>Collapsible Set:</p> <button class="collapsible">Open Section 1</button> <div class="content"> <p>text</p> </div> <button class="collapsible">Open Section 2</button> <div class="content"> <p>text.</p> </div> <button class="collapsible">Open Section 3</button> <div class="content"> <p>text</p> </div>
Simply collapse opened collapsible on click
by JS: 简单地折叠打开可折叠
on click
JS:
var coll = document.getElementsByClassName("collapsible"); var i; for (i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function() { var content = this.nextElementSibling; if (this.classList.contains("active")) { content.style.opacity = 0; } else { if(node=document.querySelector(".collapsible.active")){ node.classList.toggle("active",false); node.nextElementSibling.style.opacity = 0; } content.style.opacity = 1; } this.classList.toggle("active"); }); }
.content{ opacity:0; transition:opacity 0.5s; }
<h2>Collapsibles</h2> <p>A Collapsible:</p> <button class="collapsible">Open Collapsible</button> <div class="content"> <p>text</p> </div> <p>Collapsible Set:</p> <button class="collapsible">Open Section 1</button> <div class="content"> <p>text1</p> </div> <button class="collapsible">Open Section 2</button> <div class="content"> <p>text2</p> </div> <button class="collapsible">Open Section 3</button> <div class="content"> <p>text3</p> </div>
Or, to use with height
, you'll need to add overflow-y:hidden
to hide it completely: 或者,要使用
height
,您需要添加overflow-y:hidden
以完全隐藏它:
var coll = document.getElementsByClassName("collapsible"); for (i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function() { console.trace() debugger var content = this.nextElementSibling; if (this.classList.contains("active")) { content.style.height = 0; } else { if(node=document.querySelector(".collapsible.active")){ node.classList.toggle("active",false); node.nextElementSibling.style.height = 0; } content.style.height = content.scrollHeight+"px"; } this.classList.toggle("active"); }); }
.content{ height:0; transition:height 0.5s; overflow-y:hidden; }
<h2>Collapsibles</h2> <p>A Collapsible:</p> <button class="collapsible">Open Collapsible</button> <div class="content"> <p>text1</p> </div> <p>Collapsible Set:</p> <button class="collapsible">Open Section 1</button> <div class="content"> <p>text1</p> </div> <button class="collapsible">Open Section 2</button> <div class="content"> <p>text2</p> </div> <button class="collapsible">Open Section 3</button> <div class="content"> <p>text3</p> </div>
A more readable way to do this is to divide your code in functions, like this: 更可读的方法是在函数中划分代码,如下所示:
<script>
function hideOthers(actual) {
var contentDivs = document.querySelectorAll('.content');
contentDivs.forEach(others => {
if (others !== actual) {
others.style.display = 'none';
}
});
}
function toggleDisplay(div) {
if (div.style.display === "block") {
div.style.display = "none";
} else {
div.style.display = "block";
}
}
function onContentLoaded() {
var collapsibleDivs = document.querySelectorAll(".collapsible");
collapsibleDivs.forEach(div => {
div.addEventListener('click', e => {
var clicked = e.srcElement;
var sibling = clicked.nextElementSibling;
toggleDisplay(sibling);
hideOthers(sibling);
})
})
}
document.addEventListener("DOMContentLoaded", onContentLoaded);
</script>
Notice I've just changed your JS script and I've used document.querySelectorAll
to get all elements with a given class, forEach
function to iterate over elements, arrow functions to provide callbacks and e.srcElement
to get the clicked element on the click handler. 注意我刚刚更改了你的JS脚本,我使用了
document.querySelectorAll
来获取给定类的所有元素, forEach
函数迭代元素, 箭头函数提供回调, e.srcElement
用于获取点击的元素处理程序。 Hope it help you. 希望它对你有所帮助。 Welcome to SO!
欢迎来到SO!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.