当前位置：首页 > jquery

jquery二级菜单

2026-02-03 13:18:36jquery

jQuery 实现二级菜单的方法

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

方法一：使用 hover 事件

jquery二级菜单

$(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 结构示例：

jquery二级菜单

<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;
}