Question

我在浏览器中正确显示下拉图像菜单时遇到问题。代码如下

<!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>

我在http://jsfiddle.net/GHzfD/357/找到了github上的原始代码，但是无法重现它 - 我是否犯了一些根本性的错误？

该页面位于http://www.datatrouble.com/jquery_test.html

Answer 1

缺少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评论后更新

在包含jQuery文件之前，您正在放置msdropdown插件。

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>

使用jQuery制作下拉菜单

1 个答案: