案例:折叠框

来自CloudWiki
跳转至: 导航搜索

<!DOCTYPE html> <html> <head>

   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>折叠</title>
   <style>
       .con{
           width:200px;
       }
       .con h1{
           margin:0px;
           font-size:20px;
           padding:10px;
           background:pink;
       }
       .con p{
           margin:0;
           padding-left:20px;
           line-height:30px;
       }
       .con .list{
           display:none;
       }
   </style>
   <script src="js/jquery.min.js"></script>
   <script>
       $(function(){
           $(".con h1").click(function(){
               $(this).next().slideDown("slow").parent().siblings().children('.list').slideUp("slow");
           })
       })
   </script>

</head> <body>

第一章

第一节

第二节

第三节

第四节

第五节

第二章

第一节

第二节

第三节

第四节

第五节

第三章

第一节

第二节

第三节

第四节

第五节

第四章

第一节

第二节

第三节

第四节

第五节

第五章

第一节

第二节

第三节

第四节

第五节

</body> </html>