jQuery e.stopPropagation（） - 如何在不破壞Dropbox功能的情況下使用？

Question

短篇小說： stopPropagation（）防止關閉的下拉菜單 - 這是很好的。但它也會阻止下一次打開Dropbox - 這很糟糕。

長的故事： 我使用Twitter的引導，我已經把一個搜索框的下拉菜單裏，像這樣：

<div id="search_word_menu" style="position:absolute;right:157px;top:60px;"> 
     <ul class="nav nav-pills"> 
      <li class="dropdown" id="menu200"> 
       <a class="dropdown-toggle btn-inverse" data-toggle="dropdown" style="width:117px;position:relative;left:2px" href="#menu200"> 
       <i class="icon-th-list icon-white"></i> 
        Testing 
        <b class="caret"></b> 
       </a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Retweets</a></li> 
        <li><a href="#">Favourites</a></li> 
        <li class="divider"></li> 
        <li><a href="#">A list</a></li> 
        <li class="divider"></li> 
        <li><a href="#">A saved search</a></li> 
        <li><a href="#">A saved #hashtag</a></li> 
        <li class="divider"></li> 
        <li> 
<!-- HERE -->  <input id="drop_search" type="text" class="search_box_in_menu" value="Search..."> 

        </li> 
       </ul> 
      </li> 
     </ul> 

當我點擊搜索框裏面，默認行爲顯然是關閉下拉菜單 - 但是這使得在搜索詞中寫入相當困難。所以我嘗試了e.stopPropagation（），它確實阻止了關閉下拉菜單。然後，當我按下搜索框中的輸入時，我正在用.toggle（）關閉下拉菜單 - 也似乎正常工作。

問題出現時，我想再次一遍，因爲e.stopPropagation（）現在已經禁用了所有的下拉 - 即。當我按下拉菜單時，它不會再打開了！這是因爲stopPropagation（），毫無疑問 - 但我該如何解決這個問題，這樣我才能獲得上述功能，但不會完全打破其餘部分？

jQuery的下面：

$(document).ready(function() { 
    console.log("document.ready - "); 

       //clearing search box on click 
    $(".search_box_in_menu").click(function(e) { 
     e.stopPropagation(); // works for the specific task 
     console.log(".search_box_in_menu - click."); 
     if($(this).val() == 'Search...') { 
      $(this).val(''); 
      console.log(".search_box_in_menu - value removed."); 

     }; 
     //return false; //this is e.preventDefault() and e.stopPropagation() 


    }); 

        // when pressing enter key in search box 
    $('.search_box_in_menu').keypress(function(e) { 
     var keycode = (e.keyCode ? e.keyCode : e.which); 
     if(keycode == '13') { 
      console.log(".search_box_in_menu - enter-key pressed."); 
      console.log($(this).val()); 
      $(this).closest('.dropdown-menu').toggle(); //works 

     } 
    }); 


    $('.dropdown').click(function() { 
     console.log(".dropdown - click."); 
     $(this).closest('.dropdown-toggle').toggle(); //does nothing 
    }); 

將不勝感激一些幫助！我開始懷疑這可能是一個引導式的問題，或者至少是由它們的實現引起的 - 但它超出了我的想象。

Answer 1

找到了一個解決方案：使用stopPropagation()，並關閉手動扳機箱。然後，由於某種原因（stopPropagation()重置？），它的工作原理。

//dealing with the dropdown box 
$(document).ready(function() { 
    console.log("document.ready - "); 

    //clearing search box on click and prevent the dropdown from closing 
    $(".search_box_in_menu").click(function(e) { 
     e.stopPropagation(); 
     console.log(".search_box_in_menu - click."); 
     if($(this).val() == 'Search...') { 
      $(this).val(''); 
      console.log(".search_box_in_menu - value removed."); 
     }; 
     //return false;   

    }); 

    // when pressing enter key in search box 
    $('.search_box_in_menu').keypress(function(e) { 
     var keycode = (e.keyCode ? e.keyCode : e.which); 
     if(keycode == '13') { 
      console.log(".search_box_in_menu - enter-key pressed."); 
      console.log($(this).val()); 
      $(this).closest('.dropdown').trigger('click'); 
     } 
    }); 

    //resetting a dirty search box 
    $('.dropdown').click(function() { 
     if ($(this).closest('.search_box_in_menu').val() == 'Search...') { 
      console.log(".search_box_in_menu - clean searchbox."); 
     } 
     console.log(".dropdown - click."); 
    });  
});