首页>>Jquery文字>>顶部隐藏/显示面板(2013-12-08)

顶部隐藏/显示面板

顶部隐藏/显示面板
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. <script type="text/javascript">  
  2. $(document).ready(function(){  
  3.     // Lets make the top panel toggle based on the click of the show/hide link    
  4.     $("#sub-panel").click(function(){  
  5.         // Toggle the bar up   
  6.         $("#top-panel").slideToggle();    
  7.         // Settings  
  8.         var el = $("#shText");    
  9.         // Lets us know whats inside the element  
  10.         var state = $("#shText").html();  
  11.         // Change the state    
  12.         state = (state == 'Hide' ? '<span id="shText">Show</span>' : '<span id="shText">Hide</span>');                    
  13.         // Finally change whats insdide the element ID  
  14.         el.replaceWith(state);   
  15.     }); // end sub panel click function  
  16. }); // end on DOM  
  17. </script>  

 

XML/HTML Code
  1. <div id="top-panel"><img src="http://www.freejs.net/images/logo.png" width="300"  class="face"/><strong>freejs</strong><br />  
  2.  <span>freejs.net</span><br />   
  3. Visit my site: <a href="#">site</a></div>  
  4. <div id="sub-panel"><a href="#" id="toggle"><span id="shText">Hide</span></a></div>  
  5. <br/><br/>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_159.html