当我点击它之外的任何地方时，如何关闭 div？

Question

我有一个调用#notify div 的函数。

当用户点击这个 div 时，该函数被调用。然后当用户再次点击同一个 div 时，该功能被隐藏（使用切换）。

我想知道如何使用这个相同的功能，而是有一个关闭点击元素，所以如果用户关闭点击，则 div 被隐藏。

简而言之 当用户单击 div（小框）时，会调用一个函数（小框下方会出现一个大框），删除大框的唯一方法是再次单击小框。我希望当用户点击大框外的任何位置时隐藏大框。

<script>
$(document).ready(function() {

var notify = $("#notify");
var notifyLink = $("#notify_link");
var result = $("#result");
var loader = $('#loader');
var count = $("#count");

notify.hide();
notify.click(function(event) {
    // Handle the click on the notify div so the document click doesn't close it
    event.stopPropagation();
});

notifyLink.click(

        function () { notify.toggle(notify.css('display') == 'none');
                loader.html('<?php echo elgg_view('ajax/loader',array('slashes' => true)); ?>');    
        result.load("<?php echo $vars['url']; ?>mod/notifications/ajax/data.php",function(){
                        loader.empty(); // remove the loading gif

                    });    
        });

notifyLink.toggle(
     function () {
    $(this).addClass("selected");
  },
  function () {
    $(this).removeClass("selected");
  } );

     count.load("<?php echo $vars['url']; ?>mod/notifications/ajax/livenum.php");
   var refreshId = setInterval(function() {
      count.load("<?php echo $vars['url']; ?>mod/notifications/ajax/livenum.php");
   }, 2500);
$.ajaxSetup({ cache: false });
});
</script>

<a href="#" id="notify_link">&nbsp;</a><span id="count"></span>


<div id="notify" style="display:none;">
<h4>Notifications</h4>
<div id="loader"></div>
    <div id="result" style="width:100%; height:100%;"></div>
    <div class="seeall"><a href="<?php echo $vars['url']; ?>mod/notifications/all.php">See All Notifications</a></div>
</div>

Answer 1

我希望当用户单击大框外的任何位置时隐藏大框。

点击#notify_link div 时，您需要做一些事情：

• 启用单击document 以隐藏#notify div
• 保持#notify_link div 的点击不会流到document 并立即关闭#notify div。您可以使用event.stopPropagation() 执行此操作
• 在#notify_link div 被点击后禁用点击，因此它不会覆盖新的document 点击处理程序
• 在document 点击处理程序中，将所有内容重置为显示#notify div 之前的状态

Here's a fiddle demonstrating this.

这是示例代码。我只是松散地基于您现有的代码，因此您必须将两个解决方案合并在一起。

---

编辑：

您在 cmets 中提到您在组合代码时遇到了麻烦。我没有你的 HTML/PHP 可以使用，但这是我目前所拥有的：

$(document).ready(function () {
    var notify = $("#notify");
    notify.hide();
    notify.click(function(event) {
        // Handle the click on the notify div so the document click doesn't close it
        event.stopPropagation();
    });

    var notifyLink = $("#notify_link");
    notifyLink.click(showNotification);

    function showNotification(event) {
        $(this).unbind('click', showNotification);

        $(this).addClass("selected");
        loadData();

        notify.show();

        $(document).click(hideNotification);

        // So the document doesn't immediately handle this same click event
        event.stopPropagation();
    };

    function hideNotification(event) {
        $(this).unbind('click', hideNotification);

        notify.hide();
        $(this).removeClass("selected");

        notifyLink.click(showNotification);
    }

    $("#count").load(
        "<?php echo $vars['url']; ?>mod/notifications/ajax/livenum.php"
    );
    var refreshId = setInterval(function () {
        $("#count").load(
            "<?php echo $vars['url']; ?>mod/notifications/ajax/livenum.php"
        );
    }, 2500);
    $.ajaxSetup({
        cache: false
    });
});

function loadData() {
    $('#loader').html(
        '<?php echo elgg_view('ajax/loader',array('slashes' => true)); ?>'
    );
    $("#result").load(
        "<?php echo $vars['url']; ?>mod/notifications/ajax/data.php",
        function () {
            $('#loader').empty(); // remove the loading gif
        }
    );
}

Answer 2

你可以试试jquery选择器

$('*:not(.bigbox)').click(function() {
  //do stuff.. hide the box?
});