HTML Question

I do not hide dropdown clicking outside the element

I'm doing a drop-down button to Liferay.

The functionality of the Bootstrap own 2 Liferay not work for me, then I created one of 0.

I open one or the other depends on which button is elected. And my hide if I calc over the item.

But I fault when you click anywhere outside of the html I just hide the drop-down.

That is failing me?

HTML

<div id="desplegableBoton">
<div class="btn-toolbar">
<div class="btn-group">
<button data-toggle="dropdown" class="btn dropdown-toggle">Configurar <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Cambio de canal Wifi</a></li>
<li><a href="#">Recuperación de contraseña wifi</a></li>
<li><a href="#">Velocímetro</a></li>
<li><a href="#">Contratar upgrade</a></li>
</ul>
</div><!-- /btn-group -->

<div class="btn-group">
<button data-toggle="dropdown" class="btn btn-default dropdown-toggle">Consultar <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Cambio de canal Wifi</a></li>
<li><a href="#">Recuperación de contraseña wifi</a></li>
<li><a href="#">Velocímetro</a></li>
<li><a href="#">Contratar upgrade</a></li>
</ul>
</div><!-- /btn-group -->
</div>
</div>


JQUERY

desplegable: function() {
$('.btn').unbind().click(function(){
$('.btn.active').next('.dropdown-menu').slideUp();
$('.btn.active').removeClass('active');
$(this).stop().toggleClass('active');
$(this).next('.dropdown-menu').stop().slideToggle();
$('body').on('click', function (e) {
if (!$('.btn.active').is(e.target) && $('.btn.active').has(e.target).length === 0 && $('.active').has(e.target).length === 0) {
$('.btn.active').removeClass('active');
console.log("aaa");
}
});
});
}

Answer

You could try using blur() to detect when something else has been clicked.

blur() is a function that is called when an element "loses focus", which means that if you click outside of an item that you were interacting with, blur() is called

This might help you:

$('#desplegableBoton').blur(function(){
    $('.dropdown-menu').slideUp();
});
Comments