js || jQuery 元素收起展开

weixin_43297321

于 2020-02-23 20:36:59 发布

阅读量575

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 案例文章标签： js jquery

本文链接：https://blog.youkuaiyun.com/weixin_43297321/article/details/104466730

JavaScript 案例专栏收录该内容

13 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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