jquery实现鼠标点击菜单外,隐藏菜单
时间: 2023-04-06 10:01:55 浏览: 131
可以使用以下代码实现:
$(document).click(function(event){
var target = $(event.target);
if(!target.is('#menu') && !target.parents().is('#menu')){
$('#menu').hide();
}
});
其中,#menu 是菜单的 ID,当点击菜单外的区域时,菜单会隐藏。
相关问题
Jquery实现鼠标悬停显示二级菜单
您的问题是如何使用jQuery实现鼠标悬停显示二级菜单,对吗?
以下是一个简单的示例代码,可以帮助您实现这个效果:
HTML代码:
```
<ul class="menu">
<li><a href="#">菜单1</a>
<ul class="sub-menu">
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
<li><a href="#">子菜单3</a></li>
</ul>
</li>
<li><a href="#">菜单2</a>
<ul class="sub-menu">
<li><a href="#">子菜单4</a></li>
<li><a href="#">子菜单5</a></li>
<li><a href="#">子菜单6</a></li>
</ul>
</li>
<li><a href="#">菜单3</a></li>
</ul>
```
CSS代码:
```
.menu {
list-style: none;
padding: 0;
margin: 0;
}
.menu > li {
display: inline-block;
position: relative;
}
.menu > li > a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
}
.sub-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #f5f5f5;
border: 1px solid #ddd;
padding: 10px;
z-index: 1;
}
.sub-menu > li > a {
display: block;
text-decoration: none;
color: #333;
}
.menu > li:hover .sub-menu {
display: block;
}
```
jQuery代码:
```
$(document).ready(function() {
$('.menu li').hover(function() {
$(this).find('.sub-menu').stop().slideDown(200);
}, function() {
$(this).find('.sub-menu').stop().slideUp(200);
});
});
```
解释一下上面的代码:
1. 首先定义了一个ul列表,每个列表项li对应一个菜单项。
2. 每个菜单项li中包含一个a链接和一个子菜单ul,子菜单ul中包含了该菜单项对应的二级菜单。
3. 子菜单ul默认设置为display: none,即不显示。
4. 当鼠标悬浮到某个菜单项li上时,通过jQuery的hover()方法选中该菜单项下方的子菜单ul,并使用slideDown()方法使其向下展开,即显示出来。
5. 当鼠标移开时,使用slideUp()方法使子菜单ul向上收起,即隐藏起来。
您可以根据具体的需求,调整CSS样式和jQuery代码,实现您想要的效果。
鼠标点击菜单栏显示 jquery
要实现鼠标点击菜单栏显示 jQuery,你可以使用 jQuery 的 click() 方法和 toggle() 方法。
首先,你需要在 HTML 中创建一个菜单栏元素,例如:
```html
<div class="menu">菜单</div>
```
然后,你可以使用 jQuery 的 click() 方法来监听菜单栏元素的点击事件,并在点击时使用 toggle() 方法来显示或隐藏 jQuery。
```javascript
$(document).ready(function() {
$(".menu").click(function() {
$("jquery-selector").toggle();
});
});
```
在上面的代码中,你需要将 `jquery-selector` 替换为你想要显示或隐藏的 jQuery 元素的选择器。
这样,当用户点击菜单栏时,jQuery 元素将显示或隐藏。