一、html代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ background-color: #8A2BE2; } div{ width: 100px; height: 100px; background-color: aqua; position: relative; word-break: break-all; } div:before{ content: " "; position: absolute; left:-20px; width: 0px; height: 0px; border: 10px solid yellow; border-top-color: transparent; border-bottom-color:transparent ; border-left-color: transparent; border-right-color:yellow ; } div:after{ content: " "; position: absolute; right: -20px; bottom: 0px; width: 0px; height: 0px; border: 10px solid yellow; border-top-color: transparent; border-bottom-color:transparent ; border-left-color: yellow; border-right-color:transparent ; } header{ width: 100px; height: 20px; background-color: brown; line-height: 20px; text-align: center; margin-top: 5px; } article{ width: 100px; text-align: center; border: 1px solid red; display: none; color:red; } .show{ display: block; } </style> <script type="text/javascript" src="js/jquery-1.11.0.js" ></script> <script type="text/javascript"> $(function(){ $("header").click(function(){ if($(this).next().hasClass("show")){ $(this).next().removeClass("show"); } else{ $(this).siblings().removeClass("show"); // $(this).next().addClass("show"); $(this).next().slideToggle(1000); } }); }); </script> </head> <body> <div> 225 好吧 把好吧吧䒔不安䒔希U币 还defefrwfe </div> <header>1</header> <article> 1.1<br /> 1.2<br /> 1.3<br /> </article> <header>2</header> <article> 2.1<br /> 2.2<br /> 3.3<br /> </article> <header>3</header> <article> 3.1<br /> 3.2<br /> 3.3<br /> </article> <header>4</header> <article> 4.1<br /> 4.2<br /> 4.3<br /> </article> <input type="text" name="n1" value="2" hidden="hidden" /> </body> </html>
