鼠标指针经过菜单时,显示当前下拉框中的内容同时隐藏其他下拉菜单内容。jquery hover
时间: 2023-12-14 08:04:42 浏览: 99
您可以使用 jQuery 的 hover() 方法来实现这个功能。具体步骤如下:
1. 给菜单添加一个共同的类名,例如 ".dropdown-menu"。
2. 使用 jQuery 的 hover() 方法来监听这些菜单的鼠标悬停事件。
3. 在 hover() 方法中,使用 jQuery 的 siblings() 方法来获取同级元素(即其他下拉菜单),然后使用 hide() 方法将它们隐藏起来。
4. 最后,使用 jQuery 的 show() 方法来显示当前菜单的下拉框内容。
以下是示例代码:
```js
$('.dropdown-menu').hover(function() {
$(this).siblings().hide();
$(this).find('.dropdown-content').show();
});
```
这段代码会监听所有带有 ".dropdown-menu" 类名的元素的鼠标悬停事件。当鼠标悬停在某个菜单上时,它会隐藏其他所有菜单的下拉框内容,然后显示当前菜单的下拉框内容。
相关问题
鼠标指针经过菜单时,显示当前下拉框中的内容同时隐藏其他下拉菜单内容。 iquery的hover方法
使用 jQuery 的 `hover` 方法可以实现鼠标经过菜单时显示当前下拉框中的内容,同时隐藏其他下拉菜单内容。`hover` 方法接受两个函数作为参数,分别是鼠标移入和移出时的回调函数。
以下是使用 `hover` 方法实现显示当前下拉框内容、同时隐藏其他下拉菜单内容的示例代码:
```javascript
$(document).ready(function() {
$('.menu-item').hover(
function() {
// 隐藏其他下拉菜单内容
$('.dropdown-content').hide();
// 显示当前下拉框中的内容
$(this).find('.dropdown-content').show();
},
function() {
// 隐藏当前下拉框中的内容
$(this).find('.dropdown-content').hide();
}
);
});
```
在这个示例中,我们假设菜单项的 HTML 结构如下:
```html
<div class="menu-item">
<a href="#">菜单项</a>
<div class="dropdown-content">
<!-- 下拉菜单内容 -->
</div>
</div>
```
通过 `hover` 方法,我们可以更加简洁地实现显示当前下拉框内容、同时隐藏其他下拉菜单内容的功能。
阅读全文