我不隐藏下拉元素外的点击

Question

我正在为 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");
                    }
                });
         });
        }

Answer 1

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

blur() 是一个在元素 "loses focus" 时调用的函数，这意味着如果您在与您交互的项目外部单击，则会调用 blur()

这可能对您有帮助：

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

我不隐藏下拉元素外的点击

I do not hide dropdown clicking outside the element

html

jquery

liferay-6