jquery - 菜单 css 和 javascript 不工作

Question

你好，我在 JSFiddle 中实现下面的代码时遇到了真正的问题。它在 fiddle 中完美运行，但当我将其实现到我的网站时，它不起作用。下面是我的 html 中的图像。它是一个水平菜单栏，下面有一个下拉水平菜单栏。

The JSFiddle of what I am trying to achieve我可以看到的主要区别是使 css .active 而不是 .hover，这是我以前的做法。

无效的CSS

#menu, #menu ul {
margin: 0 auto;
padding: 0;
background-color: #FFFFFF;
}
#menu {
font-weight:400;
display: table;
width: 100%;
list-style: none;
position: relative;
top: -20px;
text-align: center;
left: -10px;
-webkit-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
font-size: 18px;
height: 20px;
z-index: 1101;
}
#menu.fixed {
position: fixed;
top: 0;
width: 100%;
}
#menu li {
display: table-cell;
list-style: none;
padding-right: 10px;
left: 50px;
vertical-align: middle;
}
#menu > li.active > ul {
background:#FFF;
display: block;
left: 0;
width: 100%;
-webkit-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.75);
border-top:thin dotted #999;
top: 32px;
height: 30px;
}
#menu > li > ul {
display: none;
position: absolute;
 text-align: center;

}
#menu li a {
display: block;
padding: 2px 10px;
text-decoration: none;
font-weight: 400;
white-space: nowrap;
color: #333;


}
#menu li a:hover {
color: #28B701;
font-size: 18px;
vertical-align: middle;
font-family: 'Lato', "sans-serif; 700;";
}
#menu li ul li {display: inline-block;
float:none; }

这是一个 livelink损坏的页面，因为我认为这是一个特定于站点的问题，我将删除它以供以后发布此帖子。

请帮助我!

Answer 1

您的问题是您在页面加载完成之前执行菜单的 javascript。它在 jsFiddle 中起作用的原因是因为您已将其设置为执行 javascript 'onLoad'，但在您的实际网站中您会立即执行它。

解决方案是将您的 javascript 代码包装在 jQuery DOM Ready 事件处理程序中，以便它在 DOM 准备就绪时执行:

$(function () {
    $('#menu > li').hover(function() {
        $( this ).addClass( "active" ).siblings().removeClass("active");
    });
});

Updated Fiddle