鼠标点击菜单栏显示 jquery
时间: 2023-08-01 22:11:14 浏览: 44
你可以使用以下代码来实现鼠标点击菜单栏显示 jQuery:
HTML:
```
<div class="menu">
<button class="menu-button">菜单</button>
<ul class="menu-list">
<li><a href="#">选项1</a></li>
<li><a href="#">选项2</a></li>
<li><a href="#">选项3</a></li>
</ul>
</div>
```
CSS:
```
.menu {
position: relative;
}
.menu-button {
background-color: #eee;
border: none;
padding: 10px;
cursor: pointer;
}
.menu-list {
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
border: 1px solid #ccc;
padding: 10px;
display: none;
}
.menu-list li {
list-style: none;
margin: 10px 0;
}
.menu-list li a {
color: #333;
text-decoration: none;
}
```
JavaScript:
```
$(document).ready(function() {
$('.menu-button').click(function() {
$('.menu-list').toggle();
});
});
```
这段代码会在文档加载完成后,为菜单按钮绑定一个点击事件。当用户点击菜单按钮时,菜单列表将显示或隐藏。