我正在嘗試創建一個下拉選單，當它懸停時會顯示內容。我自己不知道怎么做，所以我參考了 W3school 的可折疊教程的代碼。
在本教程中，單擊時可折疊打開，我可以在懸停時打開它，但是當我嘗試將滑鼠懸停在其中的內容上時它會自動關閉。當我將滑鼠懸停在內部內容上時，我需要它保持打開狀態。我真的不知道任何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";
}
});
}
uj5u.com熱心網友回復：
您需要處理mouseenterandmouseleave事件，但請為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>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/504233.html
標籤：javascript