js || jQuery 元素收起展开

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

效果图：