![](/img/trans.png)
[英]Making dropdown menu in html & css with javascript or jquery
[英]making dropdown menu with 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/上找到了原始代碼,但無法復制它-我犯了某種基本錯誤嗎?
缺少msdropdown
插件
在調用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中,這些外部鏈接也包含在左側面板中,這是快照。
還請閱讀$(window).load和$(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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.