侧边栏多级菜单滑动效果+JQ解决事件冒泡

最新推荐文章于 2024-07-06 18:15:00 发布

村头恶霸蛋炒饭

最新推荐文章于 2024-07-06 18:15:00 发布

阅读量620

点赞数

本文链接：https://blog.csdn.net/lochoto/article/details/84503324

版权

先搭好整体结构，样式根据情况设计

<ul>
    <li>
        <a class="item-1st">一级菜单</a>
        <ul class="nav-2nd">
            <li>
                <a class="item-2nd">二级菜单</a>
                <ul class="nav-3rd">
                    <li>
                        <a class="item-3">三级菜单</a>
                    </li>
                    <li></li>
                </ul>
            </li>
            <li>
                <a class="item-2nd">二级菜单</a>
            </li>
        </ul>
    </li>
    <li>
        <a class="item-1st">一级菜单</a>
    </li>
</ul>

使用JQuery方便快速安全无痛

$(".item-1st").click(function () {
    $(this).next().slideToggle();
});
$(".item-2nd").click(function () {
    $(this).next().slideToggle();
});

jQuery 中 slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

如果元素向下滑动，则 slideToggle() 可向上滑动它们。

如果元素向上滑动，则 slideToggle() 可向下滑动它们。

总结错误：

不能在上级菜单的li标签中使用slideToggle()方法显示下级菜单，会出现事件冒泡 。
即是指该菜单的点击事件会触发上级菜单的click事件。

三种解决方法：

return false：可以阻止默认事件和冒泡事件
event.stopPropagationIE下event.cancelBubble = true;：阻止冒泡事件但允许默认事件
event.preventDefault();IE下event.returnValue = false;：阻止默认事件但允许冒泡事件

上述案例另一种实现方法

<li class="item-2nd">二级菜单</li>

这样的话，代码结构会相较第一种好一些

$(".item-2nd").mousedown(function(event){
    if(window.event){
        event.cancelBubble  = true;  //IE下阻止冒泡
    }else{
        event.stopPropagation();
    }
});