帶有JS的可折疊直接下拉菜單
[英]Collapsible direct drop down menu with JS
問題描述
我正在嘗試創建一個下拉菜單，當它懸停時會顯示內容。 我自己不知道怎么做，所以我參考了 W3school 的可折疊教程的代碼。
在教程中，單擊時可折疊打開，當我將鼠標懸停在上面時可以打開它，但是當我嘗試將 hover 放在其中的內容上時它會自動關閉。 當我對內部內容進行 hover 時，我需要它保持打開狀態。 我真的不知道任何js，所以有人可以幫助我嗎？
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("mouseover", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
1 個解決方案
解決方案1
0 2022-09-05 23:06:52
您需要處理mouseenter和mouseleave事件，但請為both元素創建一個容器，以便您可以將這些事件引用給它（因為它包含兩個元素）
var coll = document.getElementsByClassName("both"); var i; for (i = 0; i < coll.length; i++) { coll[i].addEventListener("mouseenter", function() { var collapser = this.querySelector(".collapsible"); collapser.classList.add("active") var content = collapser.nextElementSibling; content.style.maxHeight = content.scrollHeight + "px"; }); coll[i].addEventListener("mouseleave", function() { var collapser = this.querySelector(".collapsible"); collapser.classList.remove("active") var content = collapser.nextElementSibling; content.style.maxHeight = null; }); }
<,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width. initial-scale=1"> <style>:collapsible { background-color; #777: color; white: cursor; pointer: padding; 18px: width; 100%: border; none: text-align; left: outline; none: font-size; 15px. },active. :collapsible:hover { background-color; #555. }:collapsible:after { content; '\002B': color; white: font-weight; bold: float; right: margin-left; 5px. }:active:after { content; "\2212". }:content { padding; 0 18px: max-height; 0: overflow; hidden: transition. max-height 0;2s ease-out: background-color; #f1f1f1: } </style> </head> <body> <h2>Animated Collapsibles</h2> <p>A Collapsible,</p> <div class="both"> <button class="collapsible">Open Collapsible</button> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat,</p> </div> </div> <div class="both"> <button class="collapsible">Open Collapsible</button> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> </body>
如何創建可折疊下拉菜單？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.