子菜单在菜单上保持打开状态
我的js菜单代码有问题。 首先让我解释一下我的尝试。
我有一个菜单，其中包含一些包含子菜单的项目。 当单击父级并包含子菜单时，子菜单应打开，当前往另一页（从单击的项目，例如子菜单项的父项）时，子菜单应保持活动且可见。
现在，当我单击父项时，子菜单会快速闪烁，但即使打开时也会关闭。 我希望子菜单在单击具有子菜单的父级时保持打开状态，以便用户可以轻松导航。
那么，这是我到目前为止的代码：
javascript：
var ddmenuitem = 0; function jsddm_open() { jsddm_close(); ddmenuitem = $(this).find('ul.submenu').css('display', 'block'); } function jsddm_close() { if(ddmenuitem) ddmenuitem.css('display', 'none'); } $(document).ready(function() { $('#topnav > ul > li').bind('click', jsddm_open) $('#topnav ul li a.suba').click(function(e){ if ($(this).attr('class') != 'active'){ $('#topnav ul li a.suba').removeClass('active'); $(this).addClass('active'); } }); $('a').filter(function(){ return this.href === document.location.href; }).addClass('active') $("ul.submenu > li > a").each(function () { var currentURL = document.location.href; var thisURL = $(this).attr("href"); if (currentURL.indexOf(thisURL) != -1) { $(this).parent("ul.submenu").css('display', 'block'); } }); });
和CSS：
#topnav ul { list-style: none; padding: 0; margin: 0; } #topnav ul li { float: left; margin: 0; padding: 0; } #topnav ul li a { padding: 5px 15px; color: #00537F; text-decoration: none; display: block; font-weight: bold; } #topnav ul li a:link { color: #FFF; text-decoration: none; } #topnav ul li a:visited { color: #FFF; text-decoration: none; } #topnav ul li a:hover { color: #FFF; text-decoration: underline; } #topnav ul li a.active { text-decoration: underline; color: #FFF; } /*#topnav ul li:hover .submenu { display:block; }*/ #topnav ul li ul.submenu { float: left; padding: 4px 0; position: absolute; left: 0; top: 24px; display: none; background: #e0e0e0; color: #00537F; } #topnav ul li ul.submenu a { display: inline; color: #00537F; padding: 4px 8px; } #topnav ul li ul.submenu li { border-right-width: 1px; border-right-style: solid; border-right-color: #00537F; } #topnav ul li ul.submenu li:last-child { border-right-style: none; } #topnav ul li ul.submenu a:link { color: #00537F; } #topnav ul li ul.submenu a:visited { color: #00537F; } #topnav ul li ul.submenu a:hover { text-decoration: underline; color: #00537F; } #topnav ul li ul.submenu li.active { text-decoration: underline; color: #00537F; } #topnav ul li ul.submenu a.active { text-decoration: underline; color: #00537F; }
请帮忙。
编辑
加载父页面时，子菜单未显示。
我一直在玩代码，但这仍然无效：
$('#topnav a').each(function(){ var myHref= $(this).attr('href'); if( url.match( myHref)) { $(this).addClass('active'); $(this).closest('ul').css('display', 'block'); } });
好的，我找到了答案。 这将解决它：
$(document).ready(function() { $('#topnav ul li ul.submenu li a').click(function(e){ if ($(this).attr('class') != 'active'){ $('#topnav ul li a').removeClass('active'); $(this).addClass('active'); } }); $('a').filter(function(){ return this.href === document.location.href; }).addClass('active') $("ul.submenu > li > a").each(function () { var currentURL = document.location.href; var thisURL = $(this).attr("href"); if (currentURL.indexOf(thisURL) != -1) { $(this).parents("ul.submenu").css('display', 'block'); } }); $('#topnav > ul > li > a').each(function(){ var currURL = document.location.href; var myHref= $(this).attr('href'); if (currURL.match(myHref)) { $(this).addClass('active'); $(this).parent().find("ul.submenu").css('display', 'block'); } }); });