abstract:<html> <head> <meta charset="utf-8"> <title>选择器</title> <script type="
<html> <head> <meta charset="utf-8"> <title>选择器</title> <script type="text/javascript"src="jquery-3.3.1.min.js"></script> <style type="text/css"> body{font-size:13px} ul li{list-style: none} </style> </head> <body> <script type="text/javascript"> $(document).ready(function(){ $('a[class=h]').css('color','red') $('.div1').click(function(){ if($('.div2').is(':visible')){ $('.div2').css('display','none'); }else{ $('.div2').css('display','block'); } }); $('.div3').click(function(){ if($('li:last').is(':visible')){ $('li:gt(5)').css('display','none'); $('.div3 a').html('更多'); }else{ $('li:gt(5)').css('display','block'); $('.div3 a').html('隐藏'); } }); }); </script> <div> <div class="div1"><h3>女装</h3></div> <div class="div2"> <ul> <li><a href="#" class='h'>冬上新</a></li> <li><a href="#" class='h'>淘宝嘉年华</a></li> <li><a href="#">毛呢外套</a></li> <li><a href="#" class='h'>毛衣针织</a></li> <li><a href="#">裤子</a></li> <li><a href="#">羽绒棉服</a></li> <li><a href="#" class='h'>连衣裙</a></li> <li><a href="#">Top神店</a></li> <li><a href="#" class='h'>棉衣棉服</a></li> <li><a href="#">羽绒服</a></li> <li><a href="#">卫衣绒衫</a></li> <li><a href="#" class='h'>半身裙</a></li> </ul> <div class="div3"><a href="#">隐藏</a></div> </div> </div> </body> </html>
点击隐藏,隐藏部分内容,点击显示,显示全部内容
Correcting teacher:灭绝师太Correction time:2018-11-08 17:41:40
Teacher's summary:很棒,利用学过的知识点,自己做的案例,继续保持