html,js,css单击弹出下拉菜单

var menuButton = document.getElementById('menubtn');
var menu = document.getElementById('menu');
var isVisible = false; // 跟踪菜单的显示状态

menuButton.addEventListener('click', function (event) {
    if (isVisible) {
        menu.style.display = 'none'; // 如果菜单已显示，点击则隐藏它
    } else {
        menu.style.display = 'block'; // 如果菜单未显示，点击则显示它
    }
    isVisible = !isVisible; // 切换状态

});
document.addEventListener('click', function (event) {
    if (!menu.contains(event.target) && !menuButton.contains(event.target)) {
        menu.style.display = "none";
    }
});

<span class="menu_box">
    <a class="btn" id="menubtn">账户设置</a>
    <div id="menu" class="menu">
        <a href="javascript:alert('0');">基本信息</a>
        <a href="javascript:alert('1');">修改密码</a>
    </div>
</span>

.menu_box{
    position: relative;
    border: 1px solid green;
    width: 4em;
}
.menu_box a.btn{
    background-color: #4CAF50;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
}
.menu {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    left: 0px;
    top: 30px;
}
.menu a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.menu a:hover {
    background-color: #f1f1f1;
}

完整页面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Click Popup Menu</title>
<style>
.menu_box {
	position: relative;
	border: 1px solid green;
	width: 4em;
}

.menu_box a.btn {
	background-color: #4CAF50;
	border: none;
	color: white;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
}

.menu {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 1;
	left: 0px;
	top: 30px;
}

.menu a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

.menu a:hover {
	background-color: #f1f1f1;
}
</style>
</head>
<body>
	<span class="menu_box"> <a class="btn" id="menubtn">Click Me</a>
		<div id="menu" class="menu">
			<a href="javascript:alert('home');">Home</a> <a
				href="javascript:alert('service');">Services</a>
		</div>
	</span>
	<script>
		var menuButton = document.getElementById('menubtn');
		var menu = document.getElementById('menu');
		var isVisible = false; // 跟踪菜单的显示状态

		menuButton.addEventListener('click', function(event) {
			if (isVisible) {
				menu.style.display = 'none'; // 如果菜单已显示，点击则隐藏它
			} else {
				menu.style.display = 'block'; // 如果菜单未显示，点击则显示它
			}
			isVisible = !isVisible; // 切换状态

		});
		document.addEventListener('click', function(event) {
			if (!menu.contains(event.target)
					&& !menuButton.contains(event.target)) {
				menu.style.display = "none";
			}
		});
	</script>

</body>
</html>

posted on 2025-04-23 18:02 骑着母猪去打猎阅读(43) 评论(0) 收藏举报