[英]javascript div closing problem
I have a div that opens when user clicks link. 当用户单击链接时,我将打开一个div。 And the div sort hovers over the link (its a more info box/div) and the div has a links and text.
并且div排序悬停在链接(其更多信息框/ div)上,并且div具有链接和文本。 Now what I want is that when user cliks outside of the div it closes/disappears.
现在我想要的是,当用户在div之外单击时,它会关闭/消失。 But I want the links inside of div to work.
但我希望div内的链接起作用。 Atm the javascript for that closin is like this:
Atm该closin的javascript是这样的:
$('html').click( function() {
$('#moreInfo').hide();
});
But the problem is that when user clicks the link inside of that #moreInfo the link doesn't work and the div just closes (it should go to different page from that link, not close the div). 但是问题是,当用户单击该#moreInfo内部的链接时,该链接不起作用,并且div仅关闭(它应从该链接转到其他页面,而不是关闭div)。
You can do this: 你可以这样做:
$(document).click(function() {
$('#moreInfo').hide();
});
$('#moreInfo').click(function(e) {
e.stopPropagation();
});
By using event.stopPropagation()
on the click
handler for the <div>
, clicks coming from inside won't bubble up to where you have a handler to close it...which is what's currently happening. 通过在
<div>
的click
处理程序上使用event.stopPropagation()
,来自内部的单击不会冒泡到您有关闭该处理程序的位置...这是当前正在发生的情况。
If I understood correctly, you don't want to hide the DIV, you want to remove it from the DOM tree. 如果我理解正确,则您不想隐藏DIV,而是想将其从DOM树中删除。
If this is the case, try this: 如果是这种情况,请尝试以下操作:
$('#moreInfo').remove();
Just remember to keep the reference to the item, so that you can re-add it when you need to. 只要记住保留对该项目的引用,以便您可以在需要时重新添加它。
I recommend you to put a closing X on the up right corner of your DIV (like a window)... In other case, you can handle blur event of a "special" element inside your div. 我建议您在DIV的右上角放置一个闭合X(如窗口)...在其他情况下,您可以处理div中“特殊”元素的模糊事件。
Hope that helps, 希望有所帮助,
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.