클릭하면 탐색에 오버레이를 적용하는 방법은 무엇입니까?

Question

http://www.jqueryload.com에서 고정 탐색을 사용했습니다. 그것을 Restyled하고 잘 작동합니다.

"내비게이션"을 클릭 할 때 어두운 오버레이를 추가하려고했습니다. 여기에 몇 가지 해결책이 있지만 구현할 때 탐색 용 스크립트가 더 이상 작동하지 않습니다. 나는이 솔루션이 '여기'를 사용하고 있기 때문에 그것이라고 생각한다. 그러나 나는 그들을 다시 쓰는 방법을 모른다. 첫 번째 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을 복사해야했습니다.

나는 이것이 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'); 
     } 
    }) 

이 코드를 사용 :

<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>