<分区>
问题必须表现出对正在解决的问题的最低限度的理解。告诉我们您尝试过的方法、为什么不起作用以及它应该 起作用。另请参阅:Stack Overflow question checklist
关闭 9 年前。
<分区>
问题必须表现出对正在解决的问题的最低限度的理解。告诉我们您尝试过的方法、为什么不起作用以及它应该 起作用。另请参阅:Stack Overflow question checklist
关闭 9 年前。
我正在研究下拉菜单。没什么特别的，只是 HTML、CSS 和 jQuery 的简单组合。我找到了一个很好的例子，但是当我试图在我自己的网站上实现它时，我不知何故无法让它工作。
因此，我将它简化为一个小模型，基本上复制了帮助我解决菜单问题的文章中所说的内容，但不知何故它仍然不起作用，我不明白为什么。
有人可以向我解释一下我在假人中做错了什么，这样我就可以在尝试修复预期菜单时以此为例吗？
Article with the dropdown code (去说基本代码的部分，花哨的东西离我的掌握还太远了)
HTML 虚拟对象:
<!DOCTYPE html>
<head>
<link rel="stylesheet" title="nzoom" type="text/css" href="opmaak_home.css">
</head>
<body>
<ul class="tabs">
<li><a href="#">Dropdown 1</a>
<ul class="dropdown">
<li><a href="#">Menu item 1</a>
<ul class="dropdown">
<li><a href="#">Submenu item 1</a></li>
<li><a href="#">Submenu item 1</a></li>
<li><a href="#">Submenu item 1</a></li>
</ul>
</li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
<li><a href="#">Menu item 4</a></li>
<li><a href="#">Menu item 5</a></li>
<li><a href="#">Menu item 6</a></li>
</ul>
</li>
<li><a href="#">Dropdown 2</a>
<ul class="dropdown">
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
<li><a href="#">Menu item 4</a></li>
<li><a href="#">Menu item 5</a></li>
<li><a href="#">Menu item 6</a></li>
</ul>
</li>
<li><a href="#">Dropdown 3</a>
<ul class="dropdown">
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
<li><a href="#">Menu item 4</a></li>
<li><a href="#">Menu item 5</a></li>
<li><a href="#">Menu item 6</a></li>
</ul>
</li>
</ul>
<script type="text/javascript" src="menu.js"></script>
</body>
.css 虚拟对象:
/* tabs
*************************/
ul.tabs
{
display: table;
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
ul.tabs li
{
margin: 0;
padding: 0;
list-style: none;
display: table-cell;
float: left;
position: relative;
}
ul.tabs a
{
position: relative;
display: block;
}
/* dropdowns
*************************/
ul.dropdown
{
margin: 0;
padding: 0;
display: block;
position: absolute;
z-index: 999;
top: 100%;
width: 250px;
display: none;
left: 0;
}
ul.dropdown ul.dropdown
{
top: 0;
left: 95%;
}
ul.dropdown li
{
margin: 0;
padding: 0;
float: none;
position: relative;
list-style: none;
display: block;
}
ul.dropdown li a
{
display: block;
}
jQuery 虚拟对象:
$(function () {
$('.dropdown').each(function () {
$(this).parent().eq(0).hover(function () {
$('.dropdown:eq(0)', this).show();
}, function () {
$('.dropdown:eq(0)', this).hide();
});
});
});
最佳答案
您还没有包含 jquery 库。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
关于jquery - 为什么 Webdesigndev 文章中的这个下拉菜单不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17308316/
相关文章：
html - 尽管内容不同，但如何确保 fieldset 元素在更大的视口(viewport)尺寸中都符合相同的高度？
javascript - 使用原始 JavaScript 提交函数时 jQuery 验证未触发
javascript - 考虑使用 Javascript 但禁用 CSS 的浏览器——这合理吗？
javascript - 将 JSON 对象数据与各个 div 连接
javascript - 返回并重新加载页面时显示不需要的服务器端警报消息
javascript - pageY on div with overflow-y