使用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制作下拉菜单

回答

相关问题