jQuery的+ CSS下拉菜單的問題

Question

我有一個有點麻煩，因爲我真的不使用jQuery的很多我也不知道有很多的經驗，JavaScript，但我發現，看起來很不錯了良好的工作菜單：

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

您需要處理登錄表單輸入框的單擊事件，以停止事件傳播到主體。

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