jquery菜单在hover时效果很好，但子菜单在点击时消失
我有一个很好的两行菜单，其中第二行显示在第一行上。 然而，当我点击它时，第二行消失了; 除非我将鼠标hover在第一行的父级上。 我希望父母和兄弟姐妹保持突出显示，直到点击另一个项目。 我搜索了很多问题，但找不到我做错了什么。
我的css：
#main-nav { margin: 0px 0px 0px 0px; text-align: left; height: 25px; background:url('images/buttonback.gif') repeat-x; padding-top: 0px; padding-left: 43px; } #main-nav li { display: inline; list-style: none; } #main-nav li a { width: 109px; height: 15px; margin-right: 5px; font-size: 12px; text-decoration: none; color: #f2f2f2; font-family: Arial, Helvetica, sans-serif; text-transform: uppercase; font-weight: bold; padding: 4px; outline: 0; position: relative; top: 5px; } #main-nav li a:hover, #main-nav li a.active { background: #00539f; } #menu2 { width: 800px; height: 25px; padding-left: 0px; background:url('images/brownback.gif') repeat-x; } .sub-links { display: none; position: absolute; width: 800px; top: 154px; text-align: left; } #main-nav li .sub-links li a:hover { background: #ca9e59; } Jquery脚本：
$(function(){ $('#main-nav li a.main-link').hover(function(){ $("#main-nav li a.main-link").removeClass("active"); $(this).addClass("active"); $(".sub-links").hide(); $(this).siblings(".sub-links").fadeIn(); }); $(function(){ $(".sub-links a").click(function(){ $(".sub-links").hide(); $(this).fadeIn(); }); }); });
和HTML：
第二行消失，因为您在点击时隐藏它：如果您不想隐藏它，只需删除此部分：
$(function(){ $(".sub-links a").click(function(){ $(".sub-links").hide(); $(this).fadeIn(); }); }); });