jquery--面板收缩下拉

一、jquery实现面板伸缩下拉
代码:
(1)css部分

.panel{
    
    
   width: 500px; 
   background: #D5BBF0;
   }
  .panel_header{
    
    
   padding: 15px; 
   border: 1px solid #999; 
   text-align: center;
   cursor: pointer;
   }
  .panel_body{
    
    
   padding: 100px; 
   text-align: center; 
   border: 1px solid #999; 
   border-top:0px;
  /* display: none;*/
   background: #ccc;
   }

(2)html以及jq部分

<body>
  <div class="panel">
   <div class="panel_header">面板头部</div>
   <div class="panel_body">面板内容</div>
  </div>
 </body>
 <script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
 <script>
      $('.panel_header').click(function(){
    
    
          $('.panel_body').slideToggle(1000);
      })
 </script>

猜你喜欢

转载自blog.csdn.net/huang_jimei/article/details/107482136