<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> </head> <style> body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,br,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0} span{ color:#FF2B13; } a{ text-decoration: none; color:#515050; } a:hover{ text-decoration: underline; color:red; } .box_all{ overflow: hidden; width: 350px; font-family: "寰�蒋闆呴粦"; font-size: 14px; border:1px solid #EEEEEE; border-top:2px solid #F57A04; padding:0 0 10px 0; margin:40px auto 0 auto; } .box { padding-left:45px; padding-top:5px; } .box li{ line-height:30px; margin-right:30px; width:120px; text-align:left; float:left; list-style-type:none; } .boxdown{ cursor:pointer; border:1px solid #EEEEEE; width:60px; height:14px; background: #FFFFFF url(http://www.17sucai.com/preview/27774/2014-08-08/jQuery%E5%88%B6%E4%BD%9C%E8%8F%9C%E5%8D%95%E4%BC%B8%E5%B1%95%E6%94%B6%E7%BC%A9%E7%89%B9%E6%95%88%E5%8F%AF%E4%BB%A5%E9%9A%90%E8%97%8F%E5%A4%9A%E4%BD%99%E5%86%85%E5%AE%B9/images/down.png) no-repeat 20px; margin-left:150px; margin-top:-2px; border-top: none; margin:0 auto; } .up{ cursor:pointer; border:1px solid #EEEEEE; width:60px; height:14px; background: #FFFFFF url(http://www.17sucai.com/preview/27774/2014-08-08/jQuery%E5%88%B6%E4%BD%9C%E8%8F%9C%E5%8D%95%E4%BC%B8%E5%B1%95%E6%94%B6%E7%BC%A9%E7%89%B9%E6%95%88%E5%8F%AF%E4%BB%A5%E9%9A%90%E8%97%8F%E5%A4%9A%E4%BD%99%E5%86%85%E5%AE%B9/images/up.png) no-repeat 20px; margin-left:150px; margin-top:-2px; border-top: none; margin:0 auto; } </style> <body> <div class="box_all"> <div class="box"> <ul> <li> <a href="#">网页设计</a><span>(2810)</span> </li> <li> <a href="#">网页软件</a><span>(820)</span> </li> <li> <a href="#">图像设计</a><span>(1840)</span> </li> <li> <a href="#">网站开发</a><span>(17810)</span> </li> <li> <a href="#">网站运营</a><span>(7890)</span> </li> <li> <a href="#">建站指南</a><span>(4850)</span> </li> <li> <a href="#">数据库</a><span>(15020)</span> </li> <li> <a href="#">服务器</a><span>(12120)</span> </li> <li> <a href="#">视频教程</a><span>(12120)</span> </li> <li> <a href="#">书籍下载</a><span>(12120)</span> </li> <li> <a href="#">更多的资源</a><span>(91123)</span> </li> </ul> </div> </div> <div class="boxdown"></div> </body> </html> <script type="text/javascript"> $(document).ready(function(){ var a =$(".box ul li:gt(3):not(:last)"); a.hide(); $(".boxdown").click(function(){ if(a.is(':visible')){ a.slideUp('fast'); $(this).removeClass('up'); }else{ a.slideDown('fast').show(); $(this).addClass('up'); } }); }); </script>
当一个页面需要多个这种功能，就需要用到遍历：
$(".contentBox .swiper2 .scheduleBox .day").each(function(){
var a =$(this).find(".dayBox dl dd:gt(1)");
a.hide();
$(this).find(".showHide").click(function(){
if(a.is(':visible')){
a.slideUp('fast');
$(this).removeClass('up');
$(this).find("span").text('展开详细');
$(this).find("i").css("transform","rotate(-90deg)");
}else{
a.slideDown('fast').show();
$(this).addClass('up');
$(this).find("span").text('收起');
$(this).find("i").css("transform","rotate(-270deg)");
}
});
})
一个div很多文字进行展开和收起：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="http://at.alicdn.com/t/font_y2pevr1o81moyldi.css" rel="stylesheet" type="text/css"> <style> .text { line-height: 1.8; margin: 0 auto; width: 500px; } .text .desc { height: 50px; padding: 20px 0; overflow: hidden; } .iconfont { width: 100%; font-size: 20px; text-align: center; cursor: pointer; } </style> </head> <body> <div class="text"> <div class="desc"> <p class="desc-content"> 目木家居旗舰店，专注家居二十年。我们彰显个性，具有浓郁现代感现代风格家居设计的特色是，其设计的元素、材料都很单一，这种设计风格已经成为越来越多时尚潮人装修的首选，现代风格家居设计从整体到局部、从空间到室内陈设塑造，精雕细琢，给人一丝不苟的印象目木家居旗舰店，专注家居二十年。我们彰显个性，具有浓郁现代感现代风格家居设计的特色是，其设计的元素、材料都很单一，这种设计风格已经成为越来越多时尚潮人装修的首选，现代风格家居设计从整体到局部、从空间到室内陈设塑造，精雕细琢，给人一丝不苟的印象目木家居旗舰店，专注家居二十年。我们彰显个性，具有浓郁现代感现代风格家居设计的特色是，其设计的元素、材料都很单一，这种设计风格已经成为越来越多时尚潮人装修的首选，现代风格家居设计从整体到局部、从空间到室内陈设塑造，精雕细琢，给人一丝不苟的印象目木家居旗舰店，专注家居二十年。我们彰显个性，具有浓郁现代感现代风格家居设计的特色是，其设计的元素、材料都很单一，这种设计风格已经成为越来越多时尚潮人装修的首选，现代风格家居设计从整体到局部、从空间到室内陈设塑造，精雕细琢，给人一丝不苟的印象 </p> </div> <div href="javascript:void(0);" class="iconfont icon-unfold"></div> </div> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> $(document).ready(function () { $(".text").off('click').on('click', '.icon-unfold', function () { $(".desc").animate({ height: $('.desc-content').height() }, "slow"); $(this).removeClass('icon-unfold icon-fold').addClass('icon-fold'); }).on('click', '.icon-fold', function () { $(".desc").animate({ height: '50px' }, "normal"); $(this).removeClass('icon-fold icon-unfold').addClass('icon-unfold'); }); }) </script> </body> </html>