jQuery第三十二天练习

<html ><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="js/jquery-3.4.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.box h1:first').addClass('active'); $('.box p:not(:first)').hide(); $('.box h1').hover(function(){ $(this).addClass('hover'); },function(){ $(this).removeClass('hover'); }); $('.box h1').click(function(){ $(this).next('p').slideToggle() .siblings('p').slideUp(); $(this).toggleClass('active') .siblings('h1').removeClass('active'); }); }); </script> <style type="text/css"> * { padding:0; margin:0; } body { padding:100px; font:12px "宋体"; } .box { width:500px; border-bottom:1px solid #CCC; } .box h1 { height:30px; line-height:30px; padding:0 10px; font-size:12px; cursor:pointer; border:1px solid #ccc; border-bottom:none; background:#eee url(images/bg_demo_07.gif) no-repeat right -27px; } .box h1.hover { background-color:#e3e2e2; } .box h1.active { background-position:right 7px; } .box p { padding:10px; border-left:1px solid #ccc; border-right:1px solid #ccc; } </style></head><body> <div>

世良情感网

轻鸟评职场技能