Как мне закрыть div, когда я нажимаю где-нибудь за его пределами?

Question

У меня есть функция, которая вызывает #notify div.

Когда пользователь нажимает на этот div, вызывается функция. Затем, когда пользователь снова нажимает на тот же элемент div, функция скрывается (с помощью переключателя).

Мне было интересно, как я мог бы использовать эту же функцию, но вместо этого иметь элемент 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_link:

• Разрешить щелчок на document, чтобы скрыть #notify div
• Не допустить клика #notify_link div от кровотечения до document и немедленного закрытия #notify дел.Вы можете сделать это с помощью event.stopPropagation()
• Отключить щелчок на элементе #notify_link после его щелчка, чтобы он не перекрывал новый обработчик кликов document
• .document обработчик щелчков, сбросьте все до того, что было до отображения #notify div

Вот скрипка, демонстрирующая это .

А вотобразец кода.Я только слегка основал его на вашем существующем коде, поэтому вам придется объединить два решения.

---

Редактировать:

Вы упомянули в комментариях, что у вас возникают проблемы при объединениикод.У меня нет вашего 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?
});