使用jQuery製作下拉菜單

我在使用下拉菜單在瀏覽器中正確顯示時出現問題。的代碼如下使用jQuery製作下拉菜單

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>jquery test</title> 

<style> 
#webmenu{ 
width:340px; 
} 

</style> 
</head> 

<body> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(window).load(function() { // makes sure the whole site is loaded 
$("body select").msDropDown(); 
    }) 
</script> 


<select name="webmenu" id="webmenu"> 
<option value="calendar" title="http://www.abe.co.nz/edit/image_cache/Hamach_300x60c0.JPG"></option> 
<option value="shopping_cart" title="http://www.nationaldirectory.com.au/sites/itchnomore/thumbs/screenshot2013-01-23at12.05.50pm_300_60.png"></option> 
<option value="cd" title="http://www.mitenterpriseforum.co.uk/wp-content/uploads/2013/01/MIT_EF_logo_300x60.jpg"></option> 

</select> 

</body> 
</html>

我發現在GitHub上的原代碼在http://jsfiddle.net/GHzfD/357/但一直無法重現它 - 我在做某種根本性的錯誤？

的頁面是活在http://www.datatrouble.com/jquery_test.html

來源

2014-10-02 user2840467

嘗試intialise'msDropDown（）''裏面的document.ready（）'，而不是'window.load' – 2014-10-02 05:48:25

我已經做了，但沒有運氣恐怕 – user2840467 2014-10-02 06:26:06

缺少msdropdown插件

msdropdownňcss

包含此代碼之前打個電話叫msdropdown

<link rel="stylesheet" href="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/css/msdropdown/dd.css> 
<script src="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/js/msdropdown/jquery.dd.min.js"></script>

中的jsfiddle這些外部鏈接也都會在左側面板上是快照。

enter image description here

又讀What is the difference between $(window).load and $(document).ready?

更新OP的評論

後，您將msdropdown插件，你已經包括jQuery的文件之前。

msdropdown是一個jQuery插件，所以必須在調用插件腳本之前添加jQuery文件。

所以它應該是這樣的： -

把你scripts頁面bottom和css在top，以提高網頁加載速度。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/js/msdropdown/jquery.dd.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("body select").msDropDown(); 
    }); 
</script>

來源

2014-10-02 05:48:17

我沒有意識到有缺少外部鏈接！感謝你 - 我已經對代碼進行了修改，並且在閱讀完文章後將它放入$（document）.ready中。我仔細檢查了外部鏈接網址，他們似乎很好，但它仍然無法正常工作。你能提供更多的幫助嗎？ – user2840467 2014-10-02 06:24:37

@ user2840467檢查更新的答案。 :) – 2014-10-02 08:20:00

非常感謝Tushar！這是做到了。我是jQuery的新手，這些基礎知識令我感到沮喪。我會回頭看看這個，並意識到我有多麼newb :) – user2840467 2014-10-03 08:49:48

使用jQuery製作下拉菜單

回答

相關問題