如何顯示一個塊，然後將其隱藏在身體上點擊JQ

Question

我在頁面上有一個信息氣泡。用戶可以通過點擊一個圖標打開它，並且我希望它們能夠通過點擊正文中的任何位置來關閉它。

http://jsfiddle.net/etDBE/7/

我無法弄清楚如何觸發一個開放的情況下，由於家長總是關閉泡沫。我試過$('body').not('.i-icon')但這不對。有什麼建議麼？

$(document).ready(function() { 
    var iIsOpen = false; 

    $('body').not('.i-icon').click(function() { 
     if (iIsOpen == true) { 
      //alert('close bubble'); 
      $('.i-narrow').hide(); 
      iIsOpen = false; 
     } 
    }); 


    $('.i-icon').click(function() { 
     //alert('open bubble'); 
     $('.i-narrow').show(); 
     iIsOpen = true; 
    }); 
}); 

Answer 1

您可以縮短你的代碼是這樣的：

$(document).ready(function() { 
    $(document).on('click',function (e) { 
     $('.i-narrow').hide(); 
    }); 
    $('.i-icon').click(function (e) { 
     e.stopPropagation(); 
     $('.i-narrow').show(); 
    }); 
}); 

因此，基本上，當您單擊文檔中的任何地方，那麼你的.i-narrow會隱藏

但是，如果你點擊.i-narrow本身，click事件將在DOM樹上冒泡，這將在document級別觸發click事件，並且.i-narrow的結果將再次隱藏。

所以這就是爲什麼你需要在這裏使用e.stopPropagation()來防止你的點擊事件冒泡。

Updated Fiddle

Answer 2

使用event.stopPropagation()當你處理打開圖標的單擊事件。

它將停止將DOM樹冒泡的點擊事件到Body，這就是元素隱藏的原因。

請注意，這也意味着在顯示「泡泡」時單擊i-icon元素不會隱藏該元素，因爲它不會觸發身體的單擊事件。

代碼：

$('.i-icon').click(function() { 
    event.stopPropagation(); // Stops the Click event bubbling up the DOM tree 
    $('.i-narrow').show(); 
    iIsOpen = true; 
}); 

Answer 3

請試試這個代碼，

$(document).ready(function() { 
    var iIsOpen = false; 

    $('body').bind('click',function (e) { 
     e.stopPropagation(); 
     if(!$(e.target).closest('.i-icon').length){ 
     if (iIsOpen == true) { 
      //alert('close bubble'); 
      $('.i-narrow').hide(); 
      iIsOpen = false; 
     } 
     } 
    }); 


    $('.i-icon').click(function() { 
     //alert('open bubble'); 
     $('.i-narrow').show(); 
     iIsOpen = true; 
    }); 

}); 

FIDDLE

Answer 4

在這裏你有很多方法可以做同樣的事情，這是另一種方式爲您驗證：

$('.i-icon').click(function (e) { 
    alert('open bubble'); 
    $('.i-narrow').show(); 
    iIsOpen = true; 
    return false; 
}); 

只需在活動結束時放置return false;即可。

Answer 5

您可以使用此：

HTML

<div class="container"> 
<img class="i-icon" src="images/i.png"> 
<div class="i-narrow"> 
    <div>Content</div> 
</div> 
    </div> 

的JavaScript

$(document).ready(function() { 
    var iIsOpen = false; 

    $(document).bind('click', function(e){ 
     var $clicked = $(e.target); 
     if (!($clicked.is('.container') || $clicked.parents().is('.container'))) { 
      $('.i-narrow').hide(); 
     } else { 
      // click inside, to what you want, or nothing :) 
     } 
    }); 


    $('.i-icon').click(function() { 
     //alert('open bubble'); 
     $('.i-narrow').show(); 
     iIsOpen = true; 
    }); 
}); 

fiddle此