Menu a tendina crollare in css

Question

stavo usando il frammento di codice da

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

ho fatto le seguenti modifiche al codice

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

Dopo aver innestato il tag di modulo di cui sopra, il menu a discesa il menu sta collassando facendo semplicemente clic su un punto qualsiasi del menu a discesa.

Qualcuno può spiegare perché?

Ho provato a fare molte modifiche ma non ha funzionato per me.

https://jsfiddle.net/tj2y5ptp/

Answer 1

provare a rimuovere data-toggle="dropdown" e utilizzando jQuery .toggleClass('open'); e .removeClass('open');-open/close menu a discesa, (poi discesa nenu si chiuderà con un semplice clic di fuori di esso (il corpo):

Aperto discesa :

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

Chiudere discesa (quando click sul corpo):

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

Vedi Updated fiddle, spero che ti aiuta, grazie.