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."); 
    });  
});