JQuery와 + CSS의 드롭 다운 메뉴 문제

Question

내가 정말 JQuery와 많이 사용하지 않는 약간의 문제가없는 나도 꽤 잘 보이는 좋은 작업 메뉴를 찾을 자바 스크립트로하지만 난 많은 경험을 가지고 수행

jQuery(window).load(function() { 

    $("#nav > li > a").click(function (e) { 
     if ($(this).parent().hasClass('selected')) { 
      $("#nav .selected div div").slideUp(100); 
      $("#nav .selected").removeClass("selected"); 

     } else { 
      $("#nav .selected div div").slideUp(100); 
      $("#nav .selected").removeClass("selected"); 

      if ($(this).next(".subs").length) { 
       $(this).parent().addClass("selected"); 
       $(this).next(".subs").children().slideDown(200); 
      } 
     } 
     e.stopPropagation(); 
    }); 

    $("body").click(function() { 
     $("#nav .selected div div").slideUp(100); 
     $("#nav .selected").removeClass("selected"); 
    }); 

}); 

을

메뉴는이만큼 간단하다 :

<li><a href="#">Tutorials</a> 
       <div class="subs"> 
        <div> 
         <ul> 
          <li><h3>Submenu #1</h3> 
           <ul> 
            <li><a href="#">Link 1</a></li> 
            <li><a href="#">Link 2</a></li> 
            <li><a href="#">Link 3</a></li> 
            <li><a href="#">Link 4</a></li> 
            <li><a href="#">Link 5</a></li> 
           </ul> 
          </li> 
          <li><h3>Submenu #2</h3> 
           <ul> 
            <li><a href="#">Link 6</a></li> 
            <li><a href="#">Link 7</a></li> 
            <li><a href="#">Link 8</a></li> 
           </ul> 
          </li> 
          <li><h3>Submenu #3</h3> 
           <ul> 
            <li><a href="#">Link 9</a></li> 
            <li><a href="#">Link 10</a></li> 
           </ul> 
          </li> 
         </ul> 
        </div> 
       </div> 
      </li> 

내가 뭘 추가하는 확장하고 당신에게 사용자 이름과 암호 입력을 표시하지만 현재 jQuery로는 부모를 선택 취소 간단한 로그인 탭이며가 다시 슬라이드 내가 입력 필드를 선택할 때.

내 질문에 내가 추가 (또는 제거)

도움말이 많이 건배 감사합니다 (버튼을 제출) 내가 입력 필드를 누를 때까지 슬라이딩을 중지해야 할 것입니다!

Answer 1

그냥이 줄을 추가 :

$('#nav').click(function(e){e.stopPropagation()}) 

Tobias Baummeister이 권리입니다.

이미 첫 번째 탐색 단계에서 e.stopPropagation()을 사용하고 있습니다. 전체 ul에 추가하면 문제가 해결됩니다.

바이올린 : http://jsfiddle.net/Adrdx/

Answer 2

내가 틀릴 수도 있지만 나는 당신의 실수가 바로 여기에 생각 : 그것을 클릭하면 입력 필드 이후

$("body").click(function() { 
     $("#nav .selected div div").slideUp(100); 
     $("#nav .selected").removeClass("selected"); 
    }); 

도 몸의 일부입니다,이 함수를 호출합니다.

Answer 3

본문으로 전달되는 이벤트를 중지하려면 로그인 양식 입력 상자의 click 이벤트를 처리해야합니다.

$('form').on('click', 'input', function(e) { 
    e.stopPropagation(); 
});