我如何使一个div关闭当我点击它外面的任何地方

Question

我有一个调用#notifydiv的函数。

当用户单击此div时，将调用该函数。然后，当用户再次单击同一div时，该函数被隐藏(使用toggle)。

我想知道如何使用相同的函数，而是有一个off click元素，所以如果用户off click,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_linkdiv时，您需要做一些事情:

• 启用点击document来隐藏#notifydiv
• 保持#notify_linkdiv点击从出血到document并立即关闭#notifydiv。你可以这样做与event.stopPropagation()
• 在点击#notify_linkdiv后禁用点击，因此它不会覆盖新的document点击处理程序
• 在document点击处理程序中，将所有内容重置为#notifydiv显示之前的状态

这里有一个小提琴来演示这个。

下面是示例代码。我只是松散地基于你现有的代码，所以你必须把两个解决方案合并在一起。

---

编辑:

您在注释中提到您在组合代码时遇到麻烦。我没有你的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?
});