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

子菜单在菜单上保持打开状态

1 个答案: