Question

好的，这里有一些我用来点击和打开/关闭div的jQuery代码。它工作得很好，但我希望能够点击页面上的任意位置来关闭它。我读到了关于e.stopPropagation的内容，但我不知道如何在此代码中使用它，或者在哪里放置它。有人可以帮忙吗？感谢。

<script type="text/javascript">
        $(document).ready(function() {
            $('#test').hide().before('<a href="#" id="toggle-menu" class="menu"><img src="images/menu.png" alt="Menu" /></a>');
            $('a#toggle-menu').click(function(e) {
                e.stopPropagation();
                $('#test').slideToggle(200);
                return false;
            });
        });
        </script>

<div id="test"></div>

Answer 1

试试这个：

$(document).ready(function () {
    $('#test').hide().before('<a href="#" id="toggle-menu" class="menu"><img src="images/menu.png" alt="Menu" /></a>');

    $('a#toggle-menu').click(function (e) {
        e.preventDefault();
        $('#test').slideToggle(200);
    });

    $(document).click(function (e) {
        if ($(e.target).closest('#test').length > 0 || $(e.target).closest('#toggle-menu').length > 0) return;
        $('#test').slideUp(200);
    });
});

FIDDLE DEMO

Answer 2

没有委派事件的其他解决方案，这样您就可以在需要时调用事件：

DEMO

只需将属性tabindex设置为div和属性CSS大纲为0。

$(function () {
    $('#test').on('blur', function (event) {
        $(this).hide();
    });
});

使用您的代码，设置焦点如下：

$('a#toggle-menu').click(function (e) {
    var $test = $('#test');
    $test.slideToggle(200,function(){if($test.is(':visible')) $test.focus();});        
    return false;
});

Answer 3

如果我理解正确，这有什么问题？

$('body').click( function() {
    $('#test').slideToggle( 200 );
});

Answer 4

我假设你想点击身体来切换div 只有在它已经打开时才会切换。

只需使用以下代码段：

$(document).ready(function() {
    $('#test').hide().before('<a href="#" id="toggle-menu" class="menu"><img src="images/menu.png" alt="Menu" /></a>');
    $('a#toggle-menu').click(function(e) {
        e.stopPropagation();
        $('#test').slideToggle(200, function() {);
            if ($(this).is(':visible')) {
                $('body').on('click', function() {
                    $('#test').slideToggle(200);
                }
            }
            else {
                $('body').off('click');
            }
        });
        return false;
    });
});

这样，当点击div时，它会等待另一次点击 - 在body或div上的任意位置 - 再关闭div }。关闭后，只需点击div本身就会再次打开它。

jQuery单击打开/关闭div但需要通过单击任意位置关闭

4 个答案: