當我點擊任何地方以外的任何地方時，我怎樣才能讓div靠近？

Question

我有一個調用#notify DIV功能。

當用戶點擊這個div，該函數被調用。然後當用戶再次點擊同一個div時，該功能被隱藏（使用切換）。

我不知道我怎麼會用這個相同的功能，而是有一個點擊關閉元素，所以如果用戶關閉點擊，股利是隱藏的。

簡而言之 當用戶點擊div（小方塊）時調用一個函數（一個Big方塊出現在小方塊的下方），除去大方塊的唯一方法是再次點擊小方塊。當用戶點擊大框外的任何地方時，我想讓大框隱藏。

<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 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? 
});