子菜单在菜单上打开点击

Question

我有一个js菜单代码的问题。首先让我解释我想要做的事情。

我有一个包含子菜单项目的菜单。子菜单应该在父母被点击时打开并且包含子菜单，并且当旅行到另一个页面（从被点击的项目，例如子菜单项的父母）时，子菜单应该保持活动并且可见。

现在，当我点击父项时，子菜单快速闪烁，但即使打开时也会关闭。我希望子菜单在点击具有子菜单的父级时保持打开状态，以便用户可以轻松导航。

所以，这里是我的代码至今：

<div id="topnav"> 
     <ul> 
      <li> 
       <a href="index.html">Home</a> 
      </li> 
      <li> 
       <a href="#">Over Meves</a> 
       <ul class="submenu"> 
        <li><a href="#" class="suba">Historie</a></li> 
        <li><a href="#" class="suba">Onze mensen</a></li> 
        <li><a href="#" class="suba">Werkzijze</a></li> 
       </ul> 
      </li> 
      <li> 
       <a href="vervolg3.html">Disciplines</a> 
       <ul class="submenu"> 
        <li><a href="vervolg.html" class="suba">Klimaatbeheersing</a></li> 
        <li><a href="#" class="suba">Elektrotechniek</a></li> 
        <li><a href="#" class="suba">Sanitaire techniek</a></li> 
        <li><a href="#" class="suba">Energiebesparingstechniek</a></li> 
        <li><a href="#" class="suba">Bouwfysica en geluid</a></li> 
        <li><a href="#" class="suba">Diensten energiebesparing</a></li> 
       </ul> 
      </li> 
      <li> 
       <a href="#">Expertise</a> 
       <ul class="submenu"> 
        <li><a href="#" class="suba">Woningbouw & Utiliteit</a></li> 
        <li><a href="#" class="suba">Zorg & Welzijn</a></li> 
        <li><a href="#" class="suba">Milieu & Energie</a></li> 
        <li><a href="#" class="suba">Beheer & Onderhoud</a></li> 
        <li><a href="#" class="suba">EPA & EPC</a></li> 
        <li><a href="#" class="suba">Legionella beheersing</a></li> 
       </ul>   
      </li> 
      <li> 
       <a href="#">Contact</a> 
       <ul class="submenu"> 
        <li><a href="#" class="suba">Adres & route</a></li> 
        <li><a href="#" class="suba">Werken bij</a></li> 
       </ul> 
      </li> 
     </ul> 
    </div> 

的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'); 
    } 
    }); 

Answer 1

好，我找到了答案。这将解决它：

$(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'); 
     } 
    }); 
});