jQuery 动感二级菜单是一种使用 jQuery 库实现的交互式导航菜单。它通常包括一个主菜单和多个子菜单,当用户鼠标悬停在主菜单项上时,子菜单会动态显示出来,从而提供更好的用户体验。
以下是一个简单的 jQuery 动感二级菜单的示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 动感二级菜单</title>
<style>
.menu {
list-style: none;
padding: 0;
margin: 0;
}
.menu li {
display: inline-block;
position: relative;
}
.submenu {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
border: 1px solid #ccc;
padding: 0;
margin: 0;
}
.menu li:hover .submenu {
display: block;
}
</style>
</head>
<body>
<ul class="menu">
<li>菜单1
<ul class="submenu">
<li>子菜单1-1</li>
<li>子菜单1-2</li>
</ul>
</li>
<li>菜单2
<ul class="submenu">
<li>子菜单2-1</li>
<li>子菜单2-2</li>
</ul>
</li>
</ul>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('.menu li').hover(
function() {
$(this).find('.submenu').stop(true, true).slideDown(200);
},
function() {
$(this).find('.submenu').stop(true, true).slideUp(200);
}
);
});
</script>
</body>
</html>
stop(true, true)
方法停止当前动画并立即完成,避免闪烁。通过以上内容,你应该对 jQuery 动感二级菜单有了全面的了解,并能够解决常见的相关问题。