I'm currently troubleshooting an issue with the site filter feature. When the btn-select is open and I click outside the panel, the select remains open. I am looking to create an event that will detect when the dropdown is closed so that I can close the btn-select as well.
<div class="dropdown pull-right" id="site-filter">
<a class="dropdown-toggle filter-label" data-toggle="dropdown" href="#">
Site Filter <i class="fa fa-filter"></i>
</a>
<div class="dropdown-menu">
<div class="panel panel-primary">
<div class="panel-heading">
<h4>Site Filter</h4>
</div>
<div class="panel-body">
<form role="form">
<div class="input-group input-daterange" style="">
<input type="text" class="input form-control" placeholder="Start Date">
<span class="input-group-addon">to</span>
<input type="text" class="input form-control" placeholder="End Date">
</div>
<a class="btn btn-select">
<input type="hidden" class="btn-select-input" id="" name="" value="" />
<span class="btn-select-value">Organization</span>
<span class='btn-select-arrow glyphicon glyphicon-chevron-down'></span>
<ul>
<li>Comapny Name</li>
</ul>
</a>
... (additional buttons and dropdowns)
<hr />
<button type="reset" class="btn btn-primary btn-outline">Reset</button>
</form>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$(document).on('click', '.btn-select', function (e) {
e.preventDefault();
var ul = $(this).find("ul");
if ($(this).hasClass("active")) {
if (ul.find("li").is(e.target)) {
var target = $(e.target);
target.addClass("selected").siblings().removeClass("selected");
var value = target.html();
$(this).find(".btn-select-input").val(value);
$(this).find(".btn-select-value").html(value);
}
ul.hide();
$(this).removeClass("active");
}
else {
$('.btn-select').not(this).each(function () {
$(this).removeClass("active").find("ul").hide();
});
ul.slideDown(300);
$(this).addClass("active");
}
});
});
</script>