jquery：在水平導航欄菜單上滑動和滑動

我想創建一個簡單的展示子菜單，使用jquery懸停時使用簡單的滑動或滑動動畫。jquery：在水平導航欄菜單上滑動和滑動

當我有＃menu1和＃menu2時，它工作正常。但是代碼中有重複。

如何讓sub1和sub2上下滑動而不重複代碼？

我也想顯示橙色的sub1和sub2和藍色的下拉列表。但是，現在全部都以藍色顯示。

謝謝。

我的代碼：

<style type="text/css"> 
ul{ 
list-style-type:none; 
margin:0; 
padding:0; 
background-color:#FF9900; 
} 
li {float:left; 
display:block; 
width:120px; 
text-align:center; 
padding:4px; 
color:#FFFFFF; 
background-color:#33CCFF;} 
</style> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#menu1").hover(
     function(){//onmouseover 
      $("#menu1 ul").slideDown(); 
     }, 
     function(){//onmouseout 
      $("#menu1 ul").slideUp(); 
     }); 
    $("#menu2").hover(
     function(){//onmouseover 
      $("#menu2 ul").slideDown(); 
     }, 
     function(){//onmouseout 
      $("#menu2 ul").slideUp(); 
     }); 
}); 
</script> 
</head> 

<body> 
<ul id="menu"> 
    <li id="menu1">Sub 1 
     <ul> 
      <li>test 1</li> 
      <li>test 2</li> 
      <li>test 3</li> 
      <li>test 4</li> 
     </ul> 
    </li> 
    <li id="menu2">Sub 2 
     <ul> 
      <li>test 1</li> 
      <li>test 2</li> 
      <li>test 3</li> 
      <li>test 4</li> 
     </ul> 
    </li> 
</ul>  
</body> 
</html>

來源

2012-07-19 vaanipala

$("#menu1,#menu2").hover(
     function(){//onmouseover 
      $(this).children("ul").slideDown(); 
     }, 
     function(){//onmouseout 
      $(this).children("ul").slideUp(); 
    });

來源

2012-07-19 06:47:03 bugwheels94

是的，那是有效的。謝謝。但是，我無法以橙色顯示sub1和sub2。所有顯示爲藍色（sub1，sub2和列表）。 – vaanipala 2012-07-19 06:57:56

所有顯示都以藍色顯示。如果你注意到CSS代碼，我試圖顯示橙色的sub1和sub2，藍色的列表項。 – vaanipala 2012-07-19 07:25:48

現在全部都以橙色顯示。 – vaanipala 2012-07-19 07:48:07

我與ANKIT的幫助和指導css:background-color for main menu sub1 and sub2 not displaying最終的解決方案。謝謝你們！

<style type="text/css"> 
* {color:#ffffff;} 
ul{ 
list-style-type:none; 
margin:0; 
padding:0; 
} 
li{float:left; 
display:block; 
width:120px; 
text-align:center; 
} 

ul > li{background-color:#0000ff;} 

ul > li > ul > li{background-color:#ff7700;} 


</style> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 

    $("#menu1,#menu2").children("ul").hide(); //hides the lists when documents loads 


    $("#menu1,#menu2").hover( 
     function(){//onmouseover 
      $(this).children("ul").slideDown(); 
     }, 
     function(){//onmouseout 
      $(this).children("ul").slideUp(); 
    }); 
}); 
</script> 
</head> 

<body> 
<ul id="menu"> 
    <li id="menu1">Sub 1 
     <ul> 
      <li>test 1</li> 
      <li>test 2</li> 
      <li>test 3</li> 
      <li>test 4</li> 
     </ul> 
    </li> 
    <li id="menu2">Sub 2 
     <ul> 
      <li>test 1</li> 
      <li>test 2</li> 
      <li>test 3</li> 
      <li>test 4</li> 
     </ul> 
    </li> 
</ul>  
</body>

來源

2012-07-20 05:11:36 vaanipala

jquery：在水平導航欄菜單上滑動和滑動

回答

相關問題