首页>>导航菜单>>jquery点击显示下拉菜单,鼠标经过显示菜单(2013-09-07)

jquery点击显示下拉菜单,鼠标经过显示菜单

 2个比较简单实用的例子，鼠标经过和点击显示子菜单

 

jquery点击显示下拉菜单,鼠标经过显示菜单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 js文件

 

JavaScript Code
  1. // JavaScript Document  
  2. $(document).ready(function()  
  3. {  
  4.     //slides the element with class "menu_body" when paragraph with class "menu_head" is clicked   
  5.     $("#firstpane p.menu_head").click(function()  
  6.     {  
  7.         $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");  
  8.         $(this).siblings().css({backgroundImage:"url(left.png)"});  
  9.     });  
  10.     //slides the element with class "menu_body" when mouse is over the paragraph  
  11.     $("#secondpane p.menu_head").mouseover(function()  
  12.     {  
  13.          $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");  
  14.          $(this).siblings().css({backgroundImage:"url(left.png)"});  
  15.     });  
  16. });  

 主要代码

 

XML/HTML Code
  1. <div align="center">  
  2.   <p><strong> 鼠标点击 </strong></p>  
  3.   <div id="firstpane" class="menu_list">  
  4.     <p class="menu_head">www.freejs.net</p>  
  5.     <div class="menu_body"> <a href="http://www.freejs.net/daohangcaidan.html">导航菜单</a> <a href="#">Link-2</a> <a href="#">Link-3</a> </div>  
  6.     <p class="menu_head">Header-2</p>  
  7.     <div class="menu_body"> <a href="#">Link-1</a> <a href="#">Link-2</a> <a href="#">Link-3</a> </div>  
  8.     <p class="menu_head">Header-3</p>  
  9.     <div class="menu_body"> <a href="#">Link-1</a> <a href="#">Link-2</a> <a href="#">Link-3</a> </div>  
  10.   </div>  
  11.   <!--Code for menu ends here-->  
  12. </div>  
  13. <br />  
  14. <div align="center">  
  15.   <!--This is the second division of right-->  
  16.   <p><strong> 鼠标经过 </strong></p>  
  17.   <div class="menu_list" id="secondpane">  
  18.     <!--Code for menu starts here-->  
  19.     <p class="menu_head">Header-1</p>  
  20.     <div class="menu_body"> <a href="#">Link-1</a> <a href="#">Link-2</a> <a href="#">Link-3</a> </div>  
  21.     <p class="menu_head">Header-2</p>  
  22.     <div class="menu_body"> <a href="#">Link-1</a> <a href="#">Link-2</a> <a href="#">Link-3</a> </div>  
  23.     <p class="menu_head">Header-3</p>  
  24.     <div class="menu_body"> <a href="#">Link-1</a> <a href="#">Link-2</a> <a href="#">Link-3</a> </div>  
  25.   </div>  
  26.   <!--Code for menu ends here-->  
  27. </div>  

 


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