下拉菜單與jQuery（漸進增強）

我希望你可以幫助我這個...我想創建一個與jQuery下拉菜單，並與瀏覽器中啓用JavaScript完美的作品。現在，我希望它在javascript轉身時工作，我不太確定如何做到這一點。下拉菜單與jQuery（漸進增強）

我在這裏有代碼，這樣你就可以看到自己。

與列表我的HTML頁面：

<!DOCTYPE HTML> 
<html> 
    <head> 
     <script src="jquery-1.6.min.js" type="text/javascript" charset="utf-8"></script> 
     <script type="text/javascript" src="p6.js"></script> 
    </head> 
    <body> 
     <ul id="menu"> 

     <li><a href="#">What's new?</a> 
      <ul class="active"> 
     <li><a href="#">Weekly specials</a></li> 
     <li><a href="#">Last night's pics!</a></li> 
     <li><a href="#">Users' comments</a></li> 
      </ul> 
     </li> 

     <li><a href="#">Member extras</a> 
      <ul> 
     <li><a href="#">Premium Celebrities</a></li> 
     <li><a href="#">24-hour Surveillance</a></li> 
      </ul> 
     </li> 

     <li><a href="#">About Us</a> 
      <ul> 
     <li><a href="#">Privacy Statement</a></li> 
     <li><a href="#">Terms and Conditions</a></li> 
     <li><a href="#">Contact Us</a></li> 
      </ul> 
     </li> 

     </ul> 
    </body> 
</html>

和我的js文件

$(document).ready(function(){ 

    $('#menu > li > ul').hide().click(function(e){ 
    e.stopPropagation(); 
    }); 

    $('#menu > li').toggle(function(){ 
    $(this).find('ul').slideDown(); 
    },function(){ 
    $(this).find('ul').slideUp(); 
    }); 

});

謝謝您的時間！

任何幫助將不勝感激！

來源

2011-11-07 Joe_B

如果JavaScript是關閉的唯一解決方案是使用<select>或下拉菜單：懸停事件，並嘗試用CSS

JS關閉==沒有使用Javascript來定製它，沒有jquery，只是簡單的HTML和CSS

來源

2011-11-07 09:24:26 fmsf

你可以用html和css做更多現代瀏覽器的使用「懸停」僞類（即6和類似的不尊重懸停僞類除了標籤）。就像這樣：

ul#menu li ul { 
    display:none 
} 
ul#menu:hover li ul { 
    display:block 
}

來源

2011-11-07 09:53:18 Brighty

有關此alistapart文章中css菜單的更多詳細信息：http：//www.alistapart.com/articles/horizdropdowns/ – Brighty

下拉菜單與jQuery（漸進增強）

回答

相關問題