当前位置: 编程技术>jquery
Jquery手风琴效果的实现代码
来源: 互联网 发布时间：2014-09-03
本文导语: jquery实现手风琴的例子。 1，html代码部分 代码示例: jquery手风琴效果-www. body,ul,div,li,dt,dd,dl{ margin:0; padding:0;} ul,li{ list-style:none;} .container{width:400px; overflow:hidden; margin:20px auto 0;} .dl-all{ width:400px; overflow:hid...
jquery实现手风琴的例子。
1，html代码部分
代码示例:
jquery手风琴效果-www.
body,ul,div,li,dt,dd,dl{ margin:0; padding:0;}
ul,li{ list-style:none;}
.container{width:400px; overflow:hidden; margin:20px auto 0;}
.dl-all{ width:400px; overflow:hidden;}
.dt-title{width:400px; background:#73c5e5; height:30px; line-height:30px;margin-top:2px;}
.dt-title a{ display:block; text-decoration:none; font-size:16px;}
.list li{ width:398px; height:25px; overflow:hidden;}
.dd-title{border: 1px solid #73C5E5; width:398px;}
.hide{ display:none;}
2，js代码部分
代码示例:
$(function(){
$(".dd-title:not(:first)").hide();
$(".dd-title:first").show();
$(".dt-title a").click(function(){
$(".dd-title:visible").slideUp("slow");
$(this).parent().next().slideDown("slow");
return false;
})
})
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术，将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。