jQuery로 중첩 된 메뉴

중첩 된 메뉴에서 해당 요소를 마우스로 가리키면 요소의 하위 메뉴를 표시하려고합니다.jQuery로 중첩 된 메뉴

HTML :

<div id="menu"> 
    <div class="menu-main-menu-container"> 
     <ul> 
      <li id="mojo_page_list_index" class="mojo_active"><a href="http://localhost/index.php">Home</a></li> 
      <li id="mojo_page_list_over"><a href="http://localhost/index.php/over">Over</a> 
       <ul> 
        <li id="mojo_page_list_bedrijfsprofiel"><a href="http://localhost/index.php/bedrijfsprofiel">Bedrijfsprofiel</a></li> 
        <li id="mojo_page_list_geschiedenis"><a href="http://localhost/index.php/geschiedenis">Geschiedenis</a></li> 
       </ul> 
      </li> 
      <li id="mojo_page_list_contact"><a href="http://localhost/index.php/contact">Contact</a></li> 
     </ul> 
    </div> 
</div>

jQuery를 : 내가 잘못

(function($){ 
    $(document).ready(function(){ 
     $("ul.menu-main-menu-container li").hover(function() {       
      $(this).addClass("hover"); 
      $('ul:first', this).css({visibility: "visible",display: "none"}).slideDown(200); 
     }, function() { 
      $(this).removeClass("hover"); 
      $('ul:first', this).css({visibility: "hidden"}); 
     }); 

     if (! ($.browser.msie && ($.browser.version == 6))){ 
      $("ul.menu-main-menu-container li ul li:has(ul)").find("a:first").addClass("arrow"); 
     }    
    }); 
})(window.jQuery);

을 뭐하는 거지?

출처

2012-08-27 Ricardo Jacobs

"작동하지 않는다"는 것은 무엇을 의미합니까? 당신은 무엇을 기대하며, 실제로 어떤 일이 일어나고 있습니까? – Asciiom

jQuery의 선택자가 잘못되었습니다. 그것의 메뉴 - 메인 메뉴 - 컨테이너의 클래스를 찾고 ul 안에 하나도 없다. 나는 이것을 단계적으로 디버그 할 것을 제안한다. 우선 html 요소를 선택하고 jQuery에서 경고를한다. 그러면 올바른 요소가 선택되었다는 것을 알 수 있으며 해당 요소의 이벤트와 함께 이동할 수 있습니다. 이 같은

출처

2012-08-27 11:54:17 cih

뭔가가 :

<div id="menu"> 
    <div class="menu-main-menu-container"> 
    <ul> 
     <li id="mojo_page_list_index" class="mojo_active"><a href="http://localhost/index.php">Home</a></li> 
     <li id="mojo_page_list_over"><a href="http://localhost/index.php/over">Over</a> 
      <ul style="display:none;"> 
       <li id="mojo_page_list_bedrijfsprofiel"><a href="http://localhost/index.php/bedrijfsprofiel">Bedrijfsprofiel</a></li> 
       <li id="mojo_page_list_geschiedenis"><a href="http://localhost/index.php/geschiedenis">Geschiedenis</a></li> 
      </ul> 
     </li> 
     <li id="mojo_page_list_contact"><a href="http://localhost/index.php/contact">Contact</a></li> 
    </ul> 
    </div> 
</div> 

    jQuery(function(){ 
     $(".menu-main-menu-container ul li").hover(function() {       
      $(this).addClass("hover"); 
      $('ul:first', this).css({display: "none"}).slideDown(200); 
     }, function() { 
      $(this).removeClass("hover"); 
      $('ul:first', this).css({display: "hidden"}); 
     }); 
    });

은 그냥 (바이올린 http://jsfiddle.net/kL8RF/1/)

jQuery(function(){ 
    $("#menu li").hover(function() {       
     $(this).addClass("hover"); 
     $('ul', this).slideDown(100); 
    }, function() { 
     $(this).removeClass("hover"); 
     $('ul', this).slideUp(100); 
    }); 
});

출처

2012-08-27 11:55:37 Oyeme

나는 모든 옵션을 시도하고 지금까지 이것을 가지고있다 : jsfiddle.net/kL8RF/1 나는 스타일 시트에 문제가 있다고 생각한다. 그러나이 방법을 배우는 것은 재미 있습니다. 나를 도울 수있는이 사람이이 스타일 시트로 내가 지금 잘못하고있는 것을 말해 줄 수 있습니까? –

@RicardoJacobs 내 코드가 업데이트되었습니다. – Oyeme

그것은 jQuery를 선택기 문제였다에서 JS 스크립트를 대체 업데이트되었습니다. 클래스 주 메뉴 -...와 함께 ul을 찾고 있지만 클래스 주 메뉴의 자손 인 ul을 찾고 있지 않다 ... This이 문제를 해결해야합니다.

출처

2012-08-27 12:11:06

jQuery로 중첩 된 메뉴

답변

관련 문제