Keep Bootstrap Dropdown Open When Clicked Inside
You can use the following JavaScript to manually open and close the dropdown menu:
$(function() {
$('.dropdown-toggle').on('click', function(event) {
$('.dropdown-menu').slideToggle();
event.stopPropagation();
});
$('.dropdown-menu').on('click', function(event) {
event.stopPropagation();
});
$(window).on('click', function() {
$('.dropdown-menu').slideUp();
});
});
Demo in StackSnippets
$(function() {
$('.dropdown-toggle').on('click', function(event) {
$('.dropdown-menu').slideToggle();
event.stopPropagation();
});
$('.dropdown-menu').on('click', function(event) {
event.stopPropagation();
});
$(window).on('click', function() {
$('.dropdown-menu').slideUp();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="navbar">
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">MENU</a>
<div class="dropdown-menu">
<p>Hello</p>
<input type="text">
</div>
</li>
</ul>
</nav>
</div>From the question Avoid dropdown menu close on click inside, you can simply stop propagation from inside the dropdown like this:
$(document).on('click', '.allow-focus .dropdown-menu', function (e) {
e.stopPropagation();
});
Demo in Stack Snipets
$(document).on('click', '.allow-focus .dropdown-menu', function (e) {
e.stopPropagation();
});<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<div class="dropdown allow-focus">
<button id="dropdownLabel" type="button" class="btn btn-default"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown trigger
<span class="caret"></span>
</button>
<div class="dropdown-menu panel" aria-labelledby="dropdownLabel">
<div class="col-xs-12">
What's Your Name?
<input type="text" placeholder="Name" class="form-control" />
</div>
</div>
</div>NOTE: To solve the opposite problem (of keeping open until clicked), you can refer to:
Keep Bootstrap Dropdown Open When Clicked Off