如何在點擊時在導航上應用疊加？

Question

我使用了http://www.jqueryload.com的固定導航。重新啓動它，並且工作正常。

當點擊「導航」時，我試圖添加一個黑色疊加層。我在這裏找到了幾個解決方案，但是當我實現它們時，導航腳本不再適用。我認爲這是因爲這裏找到的解決方案也是使用'this'。但我不知道如何改寫它們。 如何在點擊第一個li = navigatie時添加疊加層？在此先感謝 這是我使用的代碼：

HTML

<div id="nav" class="menu"> 
    <ul> 
    <li> 
    <a href="#">Navigatie<span> <img src="/images/plus.gif" 
    width="12px" height="12px" alt="plus" /></span></a> 
    <ul> 
    <li><a href="./index.php">Home</a></li> 
    <li class="keukens"><a href="keukens.php">Keukens</a></li>  
    <li class="app"><a href="apparatuur.php">Apparatuur</a></li> 
    <li class="interieur"><a href="interieur.php">Interieur</a></li> 
    <li class="contact"><a href="contact.php">Contact</a> 
    </ul> 
    </ul> 

CSS

#nav{float:left;} 
    #nav ul{list-style-type:none; color:#000;} 
    .menu{ font: 100% Arial, Helvetica, sans-serif ;padding-top:100px; 
    color:#000;height:30px;background-color:;}  
    .menu a:hover{background-color:;} 
    .menu a {text-decoration: none;padding: 0;color:#000;outline:none;} 
    .menu ul{list-style: none;margin:0;padding-left:10px;} 
    .menu ul li{padding:0;float:left;} 
    .menu ul li ul li{padding:0;float:none;margin: 0 0 0 0px;width:100%;} 
    .menu ul li ul{position: relatieve;border: 0px solid #C3D1EC; 
    box-shadow: 0px 0px #CCCCCC;margin-top: -1px; display:none; 
    padding:20px 0px 0px 0px;} 
    .active ul{display:block !important;} 
    .active a{border: 0px solid #C3D1EC;border-bottom: 0; 
    box-shadow: 0 0px 0px #CCCCCC;display: block;height: 29px; 
    padding: 0 0;position:relative;z-index: 1;} 
    .active a:hover{background-color:#000;color:#CCC;} 
    .sub{ left:10px;position: absolute; top:180px;} 

JQUERY：

(function($){ 
    $.fn.fixedMenu=function(){ 
    return this.each(function(){ 
     var menu= $(this); 
     menu.find('ul li > a').bind('click',function(){ 
     if ($(this).parent().hasClass('active')){ 
      $(this).parent().removeClass('active'); 
     } 
     else{ 
      $(this).parent().parent().find('.active').removeClass('active'); 
      $(this).parent().addClass('active'); 
     } 
     }) 
    }); 

} 
    }) 

    (jQuery); 

工作版本可以在這裏找到http://www.tossdesign.nl

Answer 1

你是對的，這是$（this）哪是錯的。

而是執行此操作：

var menu= $('#nav'); 

同時仔細檢查你有你的菜單結構，有效的HTML。 我不得不從你給的鏈接中拷貝原始的html來讓它工作。

我使用此代碼爲JS

var menu= $('#nav'); 
    menu.find('ul li > a').bind('click',function(){ 
     if ($(this).parent().hasClass('active')){ 
      $(this).parent().removeClass('active'); 
     } 
     else{ 
      $(this).parent().parent().find('.active').removeClass('active'); 
      $(this).parent().addClass('active'); 
     } 
    }) 

以供參考，這是HTML：

<ul> 
    <li class="active"> 
<a href="#">Navigatie<span> <img width="12px" height="12px" alt="plus" src="/images/plus.gif"></span></a> 
     <ul> 
      <li><a href="./index.php">Home</a></li> 
      <li class="keukens"><a href="keukens.php">Keukens</a></li>  
      <li class="app"><a href="apparatuur.php">Apparatuur</a></li> 
      <li class="interieur"><a href="interieur.php">Interieur</a></li> 
      <li class="contact"><a href="contact.php">Contact</a> 
      </li> 
     </ul> 
    </li> 
    </ul>