多层li或div展开伸缩效果

最新推荐文章于 2021-07-21 21:49:12 发布

fantoms

最新推荐文章于 2021-07-21 21:49:12 发布

阅读量125

点赞数

分类专栏： jquery 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/fantoms/article/details/84006766

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

滚动效果：

 $('#dvmq li').eq(0).fadeOut('slow',function(){    $(this).clone().appendTo($(this).parent()).fadeIn('slow');$(this).remove();});

多层li或div展开伸缩效果，支持隐藏其他元素

JQuery(document).ready(function(){JQuery("div .content").hide();JQuery(".title").css("cursor", "pointer");JQuery(".title").click(function(){var nextGo = JQuery(this).parent().next();nextGo.addClass("contentGo");JQuery("div .content:visible:not(.contentGo)").hide();nextGo.animate({height: 'toggle', opacity: 'toggle'}, { duration: "slow" });nextGo.removeClass("contentGo");return false;})});

优化一下：

JQuery(document).ready(function(){JQuery("div .content").hide();JQuery(".title").css("cursor", "pointer");JQuery(".title").click(function(){var nextGo = JQuery(this).parent().next();JQuery("div .content:visible").not(nextGo).hide();nextGo.animate({height: 'toggle', opacity: 'toggle'}, { duration: "slow" });return false;})});

美化效果：

JQuery(document).ready(function(){JQuery("div .content").hide();JQuery("div .title").css("cursor", "pointer");JQuery("div .title").click(function(){var nextGo = JQuery(this).parent().next();JQuery("div .content:visible").not(nextGo).slideUp("slow");nextGo.animate({height: 'toggle', opacity: 'toggle'}, { duration: "slow" });return false;})});