Dropdown menu crashes in css

Question

I used a code snippet from

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

I made the following changes to the code

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

After shifting the form tag above, the dropdown menu collapses by simply clicking anywhere in the dropdown list.

Can someone explain why?

I tried to make a lot of changes, but nothing worked for me.

https://jsfiddle.net/tj2y5ptp/

Answer 1

Try removing data-toggle="dropdown" and using jQuery .toggleClass('open'); and .removeClass('open'); to open/close dropdown menu (then the dropdown menu will be closed by simply clicking on it (on the body):

Open dropdown menu:

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

Close the drop-down menu (when clicking on the body):

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

See updated script , hope this helps you, thanks.