menu thả xuống sụp đổ trong css

Question

Tôi đã sử dụng đoạn mã từ

http://bootsnipp.com/snippets/featured/advanced-dropdown-search

tôi đã thực hiện những thay đổi sau vào mã

<div class="col-md-12"> 
      <form action="./" method="POST" autocomplete="on"> 
       <div class="input-group" id="adv-search"> 
        <input type="text" class="form-control" 
         placeholder="Search for snippets" id="mainForm" name="searchBox" /> 
        <div class="input-group-btn"> 
         <div class="btn-group" role="group"> 
          <div class="dropdown dropdown-lg"> 
           <button type="button" class="btn btn-default dropdown-toggle" 
            data-toggle="dropdown" aria-expanded="false"> 
            <span class="caret"></span> 
           </button> 
           <span class="dropdown-menu dropdown-menu-right" role="menu"> 
            <div class="form-horizontal" role="form"> 
             <div class="form-group"> 
              <label for="filter">Filter by</label> <select 
               class="form-control" name="docType"> 
               <option value="0" selected>All Sources</option> 
               <option value="1">Option 1</option> 
               <option value="2">Option 2</option> 

              </select> 
             </div> 
             <div class="form-group"> 
              <label for="contain">Author/Modifier</label> <input 
               class="form-control" type="text" name="authorName" /> 
             </div> 
             <div class="form-group"> 
              <label for="contain">Contains the words</label> <input 
               class="form-control" type="text" name="words" /> 
             </div> 
             <!-- <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button> --> 
            </div> 
           </span> 
          </div> 
          <button type="submit" class="btn btn-primary"> 
           <span class="glyphicon glyphicon-search" aria-hidden="true"></span> 
          </button> 
         </div> 
        </div> 
       </div> 
      </form> 
     </div> 

Sau khi chuyển toàn bộ thẻ form trên, thả xuống trình đơn bị thu hẹp bằng cách chỉ cần nhấp vào bất kỳ đâu trên menu thả xuống.

Ai đó có thể giải thích lý do tại sao?

Tôi đã thử thực hiện rất nhiều thay đổi nhưng không có gì hiệu quả đối với tôi.

https://jsfiddle.net/tj2y5ptp/

Answer 1

Hãy thử loại bỏ data-toggle="dropdown" và sử dụng jquery .toggleClass('open'); và .removeClass('open');-open/close trình đơn thả xuống, (sau đó thả xuống nenu sẽ đóng cửa chỉ bằng cách nhấn vào bên ngoài nó (trên cơ thể):

mở Dropdown :

$('.dropdown-lg .btn').on('click', function (event) { 
    $(this).parent().toggleClass('open'); 
}); 

Đóng thả xuống (khi nhấp chuột vào cơ thể):

$('body').on('click', function (e) { 
    if (!$('.dropdown-lg').is(e.target) 
     && $('.dropdown-lg').has(e.target).length === 0 
     && $('.open').has(e.target).length === 0 
    ) { 
     $('.dropdown-lg').removeClass('open'); 
    } 
}); 

Xem Updated fiddle, Tôi hy vọng nó giúp bạn, Cảm ơn bạn.