js || jQuery 元素收起展开

jQuery层叠菜单动画

最新推荐文章于 2023-10-14 22:04:08 发布

原创最新推荐文章于 2023-10-14 22:04:08 发布 · 605 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #jquery

JavaScript 案例专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何使用jQuery实现层叠菜单的收起和展开动画效果，通过slideUp和slideDown方法，为菜单项添加交互性，提升用户体验。

1、用jQuery来实现层叠关系，元素可以收起、展开；并且使用了slideUp、slideDown动画效果。

$(".ul0").click(function (e) {
    // 为了阻止冒泡
    e.stopPropagation();
    // 点击的如果是ul就跳出
    if (e.target.nodeName === "UL") return;
    // 如果点击的li没有子元素，没有菜单，也跳出
    if ($(e.target).children().length === 0) return;
    // 将li中唯一的ul的jQuery对象获取到
    var ul = $(e.target).children().eq(0);
    // 给这个ul的jQuery增加属性show，他的值是原来的值取反
    ul.data("show", !ul.data("show"));
    // 如果这个值是真,就隐藏，否则的话就显示
    ul.data("show") ? ul.slideUp(500) : ul.slideDown(500);
    // if(ul.data("show")){
    //     ul.slideUp(1000);
    // }else{
    //     ul.slideDown(1000);
    // }
})

效果图：
在这里插入图片描述