子菜單在菜單上打開點擊

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