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

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

编辑：

您在评论中提到您在组合代码时遇到问题。我没有你的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?
});

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

2 个答案: