1
2
3
4
5
Difference between revisions of "Team:Glasgow/Interlab"
Line 273: | Line 273: | ||
− | + | <style> | |
− | + | /* 收缩展开效果 */ | |
− | + | .text{line-height:22px;padding:0 6px;color:#666;} | |
− | + | .box h1{padding-left:10px;height:22px;line-height:22px;background:#f1f1f1;font-weight:bold;} | |
− | + | .box{position:relative;border:1px solid #e7e7e7;} | |
− | + | </style> | |
− | + | <script type="text/javascript"> | |
− | + | // 收缩展开效果 | |
− | + | $(document).ready(function(){ | |
− | + | // $(".box h1").toggle(function(){ | |
− | + | // $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow"); | |
− | + | // },function(){ | |
− | + | //$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow"); | |
− | + | //}); | |
− | + | $("div.text").hide();//默认隐藏div,或者在样式表中添加.text{display:none},推荐使用后者 | |
− | + | $(".box h1").click(function(){ | |
+ | $(this).next(".text").slideToggle("slow"); | ||
+ | }) | ||
+ | }); | ||
+ | </script> | ||
+ | <!-- 收缩展开效果 --> | ||
+ | <div class="box"> | ||
+ | <h1>收缩展开效果</h1> | ||
+ | <div class="text"> | ||
+ | 1<br /> | ||
+ | 2<br /> | ||
+ | 3<br /> | ||
+ | 4<br /> | ||
+ | 5<br /> | ||
+ | </div> | ||
+ | </div> | ||
+ | <br /> | ||
− | + | <div class="box"> | |
− | + | <h1>收缩展开效果</h1> | |
− | + | <div class="text"> | |
− | + | 1<br /> | |
+ | 2<br /> | ||
</div> | </div> | ||
− | + | </div> | |
+ | <br> | ||
+ | 第一次运行请刷新一下页面。 | ||
Line 316: | Line 335: | ||
</script> | </script> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</body> | </body> | ||
</html> | </html> | ||
{{Glasgowfooter}} | {{Glasgowfooter}} |
Revision as of 12:12, 8 September 2015
Glasglow
Interlab Study
收缩展开效果
收缩展开效果
1
2
2
第一次运行请刷新一下页面。