首页>>导航菜单>>点击显示菜单 下拉菜单(2013-12-02)

点击显示菜单 下拉菜单

 常见于登录后的帐号管理等位置，默认是隐藏的，鼠标点击后显示下拉详情

点击显示菜单 下拉菜单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div style='margin:50px'>  
  2.   
  3. <div class="dropdown">  
  4. <a class="account" >  
  5. <span>My Account</span>  
  6. </a>  
  7. <div class="submenu" style="display: none; ">  
  8.   
  9.   <ul class="root">  
  10. li >  
  11.       <a href="#Dashboard" >Dashboard</a>  
  12.     </li>  
  13.   
  14.       
  15.     <li >  
  16.       <a href="#Profile" >Profile</a>  
  17.     </li>  
  18.    <li >  
  19.   
  20.       <a href="#settings">Settings</a>  
  21.     </li>  
  22.      
  23.   
  24.     <li>  
  25.       <a href="#feedback">Send Feedback</a>  
  26.     </li>  
  27.   
  28.   
  29.   
  30.     <li>  
  31.       <a href="#signout">Sign Out</a>  
  32.     </li>  
  33.   </ul>  
  34. </div>  
  35. </div>  
  36.   
  37. </div>  

 

JavaScript Code
  1. <script type="text/javascript" >  
  2. $(document).ready(function()  
  3. {  
  4. $(".account").click(function()  
  5. {  
  6. var X=$(this).attr('id');  
  7.   
  8. if(X==1)  
  9. {  
  10. $(".submenu").hide();  
  11. $(this).attr('id', '0');      
  12. }  
  13. else  
  14. {  
  15.   
  16. $(".submenu").show();  
  17. $(this).attr('id', '1');  
  18. }  
  19.       
  20. });  
  21.   
  22. //Mouseup textarea false  
  23. $(".submenu").mouseup(function()  
  24. {  
  25. return false  
  26. });  
  27. $(".account").mouseup(function()  
  28. {  
  29. return false  
  30. });  
  31.   
  32.   
  33. //Textarea without editing.  
  34. $(document).mouseup(function()  
  35. {  
  36. $(".submenu").hide();  
  37. $(".account").attr('id', '');  
  38. });  
  39.       
  40. });  
  41.       
  42.     </script>  

 


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