jquery二级菜单

jQuery 实现二级菜单的方法

使用 jQuery 可以轻松实现二级菜单的显示和隐藏效果。以下是几种常见的方法：

方法一：使用 hover 事件

$(document).ready(function(){
    $('.main-menu-item').hover(
        function() {
            $(this).find('.sub-menu').stop(true, true).slideDown(200);
        },
        function() {
            $(this).find('.sub-menu').stop(true, true).slideUp(200);
        }
    );
});

HTML 结构示例：

<ul class="main-menu">
    <li class="main-menu-item">
        <a href="#">主菜单1</a>
        <ul class="sub-menu">
            <li><a href="#">子菜单1</a></li>
            <li><a href="#">子菜单2</a></li>
        </ul>
    </li>
</ul>

方法二：使用 click 事件

$(document).ready(function(){
    $('.main-menu-item').click(function(){
        $(this).find('.sub-menu').toggle(300);
    });
});

方法三：添加动画效果

$(document).ready(function(){
    $('.main-menu-item').hover(
        function() {
            $(this).find('.sub-menu').stop(true, true).fadeIn(300);
        },
        function() {
            $(this).find('.sub-menu').stop(true, true).fadeOut(300);
        }
    );
});

CSS 样式建议

.main-menu {
    list-style: none;
    padding: 0;
}

.main-menu-item {
    position: relative;
    display: inline-block;
    margin-right: 20px;
}

.sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 200px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.sub-menu li {
    padding: 8px 15px;
    border-bottom: 1px solid #eee;
}

注意事项

• 使用 stop(true, true) 可以防止动画队列堆积
• 确保子菜单的定位方式为 position: absolute
• 父级菜单项需要设置为 position: relative
• 移动端可能需要调整交互方式为点击触发

这些方法可以根据实际需求进行调整，比如改变动画时间、效果或触发方式。