से</p> <p><a href="http://bootsnipp.com/snippets/featured/advanced-dropdown-search" rel="nofollow">http://bootsnipp.com/snippets/featured/advanced-dropdown-search</a></p> <p>सीएसएस

Question

में गिर रहा कोड का टुकड़ा उपयोग कर रहा था मेनू ड्रॉप डाउन मैं नीचे ऊपर दिए गए फ़ॉर्म टैग स्थानांतरण के बाद कोड

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

में निम्न परिवर्तन किए, ड्रॉप ड्रॉपडाउन पर कहीं भी क्लिक करके मेनू गिर रहा है।

क्या कोई बता सकता है क्यों?

मैंने बहुत सारे बदलाव करने की कोशिश की लेकिन मेरे लिए कुछ भी काम नहीं किया।

https://jsfiddle.net/tj2y5ptp/

Answer 1

data-toggle="dropdown" को दूर करने और open/close के लिए ड्रॉपडाउन मेनू, jQuery .toggleClass('open'); और .removeClass('open'); का उपयोग कर (तब का प्रयास करें ड्रॉपडाउन नेनू बस (शारीरिक पर) यह बाहर क्लिक करके बंद हो जाएगा:

ओपन ड्रापडाउन :

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

बंद ड्रापडाउन (जब शरीर पर क्लिक):

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

, Updated fiddle देखें मुझे आशा है कि यह आप में मदद करता है, धन्यवाद।