如何在jQuery悬停菜单上允许默认子菜单
|
这从一个相关的问题开始。在得到一个出色的答案之后，我遇到了无法预料的功能缺口：如何显示默认情况下打开的菜单？
更具体地说，如果用户登陆到我的子导航中存在的页面，则我希望打开该子导航并突出显示当前页面。如果他们使用菜单进行浏览，它将发生相应的变化，但是如果他们没有选择，则始终返回默认状态。
我基于此的代码可以在此jsfiddle中找到。
菜单结构如下：
<div id=\"mnav\">
<ul id=\"buttons\">
<li class=\"one\"><a href=\"#\">Main 1</a></li>
<li class=\"two\"><a href=\"#\">Main 2</a></li>
<li class=\"three\"><a href=\"#\">Main 3</a></li>
<li class=\"four nav-dark\"><a href=\"#\">Main 4</a></li>
</ul>
</div><!-- /mnav -->
<div id=\"snav\">
<ul class=\"snav-one\">
<li><a href=\"#\">Sub 1.1</a></li>
<li><a href=\"#\">Sub 1.2</a></li>
<li><a href=\"#\">Sub 1.3</a></li>
</ul>
<ul class=\"snav-two\">
<li><a href=\"#\">Sub 2.1</a></li>
<li><a href=\"#\">Sub 2.2</a></li>
</ul>
</div><!-- /snav -->
没有找到相关结果
已邀请:
1 个回复
攫怂绵十
确保页面具有如下样式：#snav ul.defaultMenu { display: block; /* Or the correct visible display mode.*/ }。另外，所有内容都合并为一个通话。并且根据生产页面，可能会进一步简化。 请参阅jsFiddle上的演示。$(\"#buttons li, #snav ul\").hover (function (zEvent) {MenuOpenCloseErgoTimer (zEvent); } ); function MenuOpenCloseErgoTimer (zEvent) { var dDelay; var ActionFunction = null; if (zEvent.type == \'mouseenter\') { if (zEvent.currentTarget.nodeName == \'LI\') //-- Main nav. { dDelay = 300; ActionFunction = function (node) { //--- The first class is a special tie to a submenu, if it exists var subnav = \'ul.snav-\' + $(node).attr (\'class\').split (\' \')[0]; $(\"#snav ul\").hide (); $(\"#snav\").find (subnav).show (); //--- Not sure what\'s going on with the \"open\" class. It\'s irrelevant to this demo. if (GBL_bNoDefaultMenu) $(\"#snav\").stop (true, true).slideDown (\'fast\').addClass (\"open\"); }; } else //-- zEvent.currentTarget.nodeName == \'UL\' //-- Sub nav. { dDelay = 0; ActionFunction = function (node) { $(node).show (); if (GBL_bNoDefaultMenu) $(\"#snav\").stop (true, true).slideDown (\'fast\').addClass (\"open\"); }; } } else //-- zEvent.type == \'mouseleave\' { //--- Actions for main nav and sub nav are the same. dDelay = 200; ActionFunction = function (node) { if (GBL_bNoDefaultMenu) $(\"#snav\").stop (true, true).slideUp (\'fast\').removeClass (\"open\"); $(\"#snav ul\").hide (); $(\"#snav ul.defaultMenu\").show (); } } if (typeof this.delayTimer == \"number\") { clearTimeout (this.delayTimer); } this.delayTimer = setTimeout (function() { ActionFunction (zEvent.currentTarget); }, dDelay); }