jquery - CSS 菜单 - 移动条：怎么了？

Question

我想在我的网站导航中实现一个移动栏，但我遇到了一些麻烦。作为教程，我点击了这个链接（http://css-tricks.com/jquery-magicline-navigation/）

这是我的结果： http: //matt-productions.be/berto/index.html

有人会这么好心检查出了什么问题吗？

太感谢了！马特

Answer 1

首先，#magic-line由于您在 CSS 中调用#MagicLine了一个选择器，因此缺少 CSS。

其次，.hover()选择器不正确。它应该将悬停事件绑定到菜单项的子<a>标签$("#example-one li a").hover(function() {，但您已将其绑定到魔术线$("#navMagicLine li a").hover(function() {。这会导致宽度计算产生错误的值，从而使魔术线比预期的要长很多。

解决这些问题应该可以纠正您的菜单，但将来我建议您再次查看任何示例代码或尝试创建您自己的独立演示。我经常发现在尝试在jsFiddle或其他演示站点中创建演示时，问题变得清晰 :-)

编辑：

您的 CSS 仍然与演示不同。列表项需要，否则display:inline-blockjQuery 将无法计算.width(). 内联元素没有宽度（或高度）。

CSS 需要：

#navMagicLine li {
    display: inline-block;
}

.hover()需要在<a>您的菜单上，而不是动态行。它需要是：

$("#navMagicLine li a").hover(function() {
    // function body
})