Question

当我点击显示信息窗口时，我在Bootstrap中创建按钮。我想在显示信息窗口时，如果我在信息区域外单击，则信息窗口将隐藏，按钮中的图标也会改变

演示

JS

$(document).ready(function () {
    $('#nav-info-icons').click(function () {
        $(this).toggleClass('open');
    });
});

$(document).ready(function () {
    var sideslider = $('[data-toggle=collapse-info]');
    var sel = sideslider.attr('data-target');
    sideslider.click(function (event) {
        $(sel).toggleClass('in');
    });
});

我找到了解决方案

$(document).ready(function () {
    $(document).mouseup(function (e) {
        var container = $("#navbar-info-panel");
        var container1 = $("#nav-info-icons");
        var opened = $("#nav-info-icons").hasClass("open");
        if (!container.is(e.target) && container.has(e.target).length === 0 && !container1.is(e.target) && container1.has(e.target).length === 0) {
            if (opened) {
                $("button.navbar-toggle-info").click();
                $("#nav-info-icons").removeClass("open");
            }
        } else {

        }
    });
});

Answer 1

试试这个：

$('body,html').on('click', function() {
   $('#nav-info-icons').removeClass('open'); // Hide the nav
   $(sel).removeClass('in'); // Hide for collapse
});

Answer 2

另一种解决方案。使用以下内容更新JS。

$(document).ready(function () {
    var sideslider = $('[data-toggle=collapse-info]');
    var sel = sideslider.attr('data-target');

    sideslider.click(function (event) {
        event.stopPropagation();  //Stop even bubbling to parent
        $(sel).toggleClass('in');
        $('#nav-info-icons').toggleClass('open');
    });

    $('#nav-info-icons').click(function () {
        event.stopPropagation(); //Stop even bubbling to parent
        $(this).toggleClass('open');
        $(sel).toggleClass('in');
    });

    $('body').on('click', function (e) {
        if ($(e.target).is($('#nav-info-icons span'))) return; //Don't execute onclick

        if($('#nav-info-icons').attr("class") === "open") //Check for class - open, then hide info panel
        {
            $('#nav-info-icons').removeClass('open');
            $('#navbar-info-panel').addClass('in');
        }
    })
});

在区域外单击时隐藏菜单 - Bootstrap

2 个答案: