點擊任何輸入框後關閉下拉菜單

Question

我創建了一個下拉菜單，其中我創建了一個搜索條件表單。 現在，無論何時點擊任何輸入框，菜單都會關閉。 有什麼辦法可以解決它。

這裏是我的html代碼：

<ul class="nav navbar-nav"> 
<li class="dropdown dropdown-large"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Search<b class="caret"></b></a> 



    <ul class="dropdown-menu dropdown-menu-large row"> 
     <center>Search Criteria</center> 
     <hr> 
     <li class="col-sm-3"> 
      <ul> 

       <li>Profile ID</li> 
       <li> 
        <input type="text"> 
       </li> 

      </ul> 
     </li> 
     <li class="col-sm-3"> 
      <ul> 
       <li>Name</li> 
       <li> 
        <input type="text"> 
       </li> 

      </ul> 
     </li> 
     <li class="col-sm-3"> 
      <ul> 
       <li>Age</li> 
       <li> 
        <input type="text" size="5">&nbsp;to&nbsp; 
        <input type="text" size="5"> 
       </li> 

      </ul> 
     </li> 
     <li class="col-sm-3"> 
      <ul> 

       <li>Date of Birth</li> 
       <li> 
        <input type="date"> 
       </li> 

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

和我的CSS代碼：

.dropdown-large { 
    position: static !important; 
} 
.dropdown-menu-large { 
    margin-left: 16px; 
    margin-right: 16px; 
    padding: 20px 0px; 
} 
.dropdown-menu-large > li > ul { 
    padding: 0; 
    margin: 0; 
} 
.dropdown-menu-large > li > ul > li { 
    list-style: none; 
} 
.dropdown-menu-large > li > ul > li > a { 
    display: block; 
    padding: 3px 20px; 
    clear: both; 
    font-weight: normal; 
    line-height: 1.428571429; 
    color: #333333; 
    white-space: normal; 
} 
.dropdown-menu-large > li ul > li > a:hover, 
.dropdown-menu-large > li ul > li > a:focus { 
    text-decoration: none; 
    color: #262626; 
    background-color: #f5f5f5; 
} 
.dropdown-menu-large .disabled > a, 
.dropdown-menu-large .disabled > a:hover, 
.dropdown-menu-large .disabled > a:focus { 
    color: #999999; 
} 
.dropdown-menu-large .disabled > a:hover, 
.dropdown-menu-large .disabled > a:focus { 
    text-decoration: none; 
    background-color: transparent; 
    background-image: none; 
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 
    cursor: not-allowed; 
} 
.dropdown-menu-large .dropdown-header { 
    color: #428bca; 
    font-size: 18px; 
} 
@media (max-width: 768px) { 
    .dropdown-menu-large { 
    margin-left: 0 ; 
    margin-right: 0 ; 
    } 
    .dropdown-menu-large > li { 
    margin-bottom: 30px; 
    } 
    .dropdown-menu-large > li:last-child { 
    margin-bottom: 0; 
    } 
    .dropdown-menu-large .dropdown-header { 
    padding: 3px 15px !important; 
    } 
} 

Answer 1

嘗試使用e.stopPropagation()：

$(document).on('click', '.dropdown', function (e) { 
    e.stopPropagation(); 
}); 

Bootply Demo