数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律学如何避免下拉菜单在内部点击时关闭菜单项？
我们可以使用 preventDefault() 方法来阻止下拉菜单上点击事件的默认行为。通过这样做，菜单项在内部点击时不会关闭。此外，我们可以在下拉菜单上添加一个点击事件监听器，并设置 event.stopPropagation() 方法来阻止事件传播到父元素。
HTML 下拉菜单
HTML 下拉菜单是一种表单元素，允许用户从选项列表中选择一个选项。它使用 HTML 中的 "select" 和 "option" 标签创建。 "select" 标签定义下拉容器， "option" 标签定义下拉菜单中的选项。要预选一个选项，请在 "option" 标签上使用 "selected" 属性。所选选项的值可以使用 JavaScript 访问，或者使用 "select" 标签上的 "name" 属性访问。
方法
防止下拉菜单在内部点击时关闭的一种方法是使用 event.stopPropagation() 方法阻止事件冒泡到父元素。您可以将此方法附加到下拉菜单或其子元素的点击事件上，以防止在内部点击时菜单关闭 -
document.querySelector('.dropdown-menu').addEventListener('click', function(event) {
event.stopPropagation();
});
或者，您可以使用 event.preventDefault() 来阻止点击事件的默认行为，这也可以防止菜单关闭 -
document.querySelector('.dropdown-menu').addEventListener('click', function(event) {
event.preventDefault();
});
您也可以使用 jQuery 来做到这一点 -
$(".dropdown-menu").click(function(event){
event.stopPropagation();
});
还需要注意的是，这取决于您使用的框架或库。某些框架或库可能有自己的处理点击事件和阻止其关闭菜单的方法。
最终代码
以下是如何使用 JavaScript 和 HTML 创建一个在点击项目时不会关闭的下拉菜单的示例 -
HTML
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
CSS
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
JavaScript
// Get all the links inside the menu
var dropdownLinks = document.querySelectorAll(".dropdown-content a");
// Add a click event listener to each link
dropdownLinks.forEach(function(link) {
link.addEventListener("click", function(event) {
// Prevent the default action of the link (redirecting to the href)
event.preventDefault();
// Do something else here (e.g. update the page with the link's data)
});
});
解释
在此示例中，我们使用 HTML 和 CSS 创建了一个下拉菜单。默认情况下菜单隐藏，当用户将鼠标悬停在按钮上时显示。
在 JavaScript 中，我们首先使用 querySelectorAll() 方法获取菜单内部的所有链接。然后我们循环遍历所有链接，并为每个链接添加一个点击事件监听器。在事件监听器中，我们使用 preventDefault() 方法阻止链接的默认操作（即重定向到链接的 href）。这样，当用户点击链接时，它不会关闭菜单，并且您可以对链接执行其他操作。
您可以通过在每个链接的点击事件上添加一些自定义功能来进一步增强功能。
完整代码
<html>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
<script>
// Get all the links inside the menu
var dropdownLinks = document.querySelectorAll(".dropdown-content a");
// Add a click event listener to each link
dropdownLinks.forEach(function(link) {
link.addEventListener("click", function(event) {
// Prevent the default action of the link (redirecting to the href)
event.preventDefault();
// Do something else here (e.g. update the page with the link's data)
});
});
</script>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</html>
13K+ 浏览量
