Question

我有一个创建下拉列表的按钮，您可以在其中选择多个类别。现在我希望当我在下拉列表外单击时自动关闭。像灯箱或模态弹出窗口的东西，如果您点击页面上的任何其他位置，它会关闭。现在我必须再次单击该按钮才能关闭它。如果我不去页面上的其他地方，下拉列表仍然可见（直到我点击它）

这是按钮的代码：

$(function(){
    $('#browse-btn').click(function(){
        $('#browse-content').toggle('1000');
        $(this).toggleClass('active');                          
        if ($(this).hasClass('active')) $(this).find('span').html('&#x25B2;')
        else $(this).find('span').html('&#x25BC;')
    });

    $(".scroll-top").scrollToTop();

    $("#category_id").selectbox();
});

这可能吗？感谢

Answer 1

使用jquery这是我之前用于类似案例场景的代码：

$(document).click(function(event) { 
    if(!$(event.target).closest('.pulldown').length) {
        if($('.pulldown').is(":visible")) {
            $('.pulldown').slideUp()
        }
    }        
})

您可以在Art提交的原始帖子How to detect a click outside an element?中详细了解此信息。

Answer 2

由于您没有演示，我不确定您要隐藏的元素，因此我无法提供完整的代码，但您应该执行以下操作：

$("body").click(function(event) {
    if (event.target.id != "browse-btn") {
        // Do something when there's a click outside of #browse-btn 
        // and the element you want to hide is currently visible
    }
});

Answer 3

您可以将click事件附加到正文标记的所有chidren，以删除该活动类，但是您希望确保取消绑定该事件，以便每次发生单击时都不会运行该事件＆＃ 39;有一些防止违约的东西。像这样：

$(function(){
    var hidePulldown = function(){
        $('#browse-btn').removeClass('active');
        $('body *').unbind("click", hidePulldown);
    }
    $('#browse-btn').click(function(){
        $('#browse-content').toggle('1000');
        $(this).toggleClass('active');                          
        if ($(this).hasClass('active')) $(this).find('span').html('&#x25B2;')
        else {
            $(this).find('span').html('&#x25BC;');
            $(document).on('click', 'body *', hidePulldown);
        }
    });

    $(".scroll-top").scrollToTop();

    $("#category_id").selectbox();
});

另外，

$(document).on('click', element, function(){function body})

是附加点击事件的首选方式，我相信：$(document).on('click', '#id', function() {}) vs $('#id').on('click', function(){})

Answer 4

在阅读了一些答案之后，这对我来说是完美无缺的：

$(document).click(function(event) { 
if(!$(event.target).closest('#menucontainer').length &&
   !$(event.target).is('#menucontainer')) {
    if($('#menucontainer').is(":visible")) {
        $('#menucontainer').hide();
    }
}        
})

感谢您以正确的方式指点我！

自动关闭功能供选择

4 个答案: