jQuery: Hide element on click anywhere else apart of the element
Possible Duplicate:
How to detect a click outside an element?
I'm trying to achieve that a 'div' hides if user clicks anywhere except on the element. I've got following code doing toggle() if user clicks on a button. I want the button click to stay plus if the 'Details' element is visible, reacts to other parts of the screen.
$('.nav-toggle').click(function(){
//get collapse content selector
var collapse_content_selector = $(this).attr('href');
//make the collapse content to be shown or hide
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function(){
if($(this).css('display')=='none'){
//change the button label to be 'Show'
toggle_switch.html('Show Details');
}else{
//change the button label to be 'Hide'
toggle_switch.html('Hide Details');
}
});
});
You can resort to the concept of event delegation.
$(function() {
$(document).on('click', function(e) {
if (e.target.id === 'div1') {
alert('Div Clicked !!');
} else {
$('#div1').hide();
}
})
});
Check FIDDLE
I did not understand what you meant by integrating with the other part.. This is the basic idea..
You can use the jQuery .blur() function to hide a div when user click on other element (like link, boutton, whathever..)
The blur event is fire when an element is loosing the focus (user select another element on the DOM tree)
I don't understand the link with your toggle. If your toggle button manage the DIV, its inside the toggle function that you should place the hide()/show() on the div, in the same time as updating the text of the button.
链接地址: http://www.djcxy.com/p/14698.html上一篇: 如果div未隐藏，请单击任何位置以隐藏