我不隐藏在元素外部单击的下拉菜单答案

【问题标题】：I do not hide dropdown clicking outside the element我不隐藏在元素外部单击的下拉菜单
【发布时间】：2017-03-01 05:01:28
【问题描述】：

我正在为 Liferay 做一个下拉按钮。

Bootstrap 自己的 2 Liferay 的功能对我不起作用，然后我创建了 0 之一。

我打开一个或另一个取决于选择哪个按钮。如果我计算该项目，我的隐藏。

但是当你点击 html 之外的任何地方时我会出错，我只是隐藏了下拉菜单。

这让我失望了？

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");
                    }
                });
         });
        }

【问题讨论】：

标签： jquery html liferay-6

【解决方案1】：

您可以尝试使用blur() 来检测何时点击了其他内容。

blur() 是一个在元素“失去焦点”时调用的函数，这意味着如果您在与之交互的项目之外单击，则会调用blur()

这可能会对您有所帮助：

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

【讨论】：