顶部隐藏/显示面板

顶部隐藏/显示面板

 

演示

 

 

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