drop down menu zawaleniem w css

Question

używałem fragment kodu z

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

I dokonała następujących zmian w kodzie

<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> 

Po zmianie biegu powyżej znacznika FORM, spadek w dół menu zwija się po prostu klikając w dowolnym miejscu na liście rozwijanej.

Czy ktoś może wyjaśnić, dlaczego?

Próbowałem wprowadzić wiele zmian, ale nic nie działało dla mnie.

https://jsfiddle.net/tj2y5ptp/

Answer 1

Spróbuj usunąć data-toggle="dropdown" i przy użyciu jquery .toggleClass('open'); i .removeClass('open'); do open/close menu rozwijane, (wtedy rozwijanej Nenu zostanie zamknięty poprzez kliknięcie poza nią (na ciele):

Otwórz rozwijanej :

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

Close rozwijane (gdy kliknięcie na ciele):

$('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'); 
    } 
}); 

Zobacz Updated fiddle, Mam nadzieję, że to pomaga, dzięki.