嵌套的弹出窗口打开和关闭按钮

Question

我想在一个页面中使用两个jquery函数有多个弹出窗口。其中之一是一个打开弹出窗口的按钮（它嵌套在按钮本身内，以便将弹出窗口放置在按钮旁边）。另一个函数是一个应该关闭弹出窗口的按钮（它位于嵌套div内）。

问题是，构成第一个按钮的div将它的功能扩展到打开的弹出窗口，有效地使它每当我想关闭弹出窗口时都会再次打开。 （或者至少这是我想它，因为毕竟我取消嵌套从弹出的打开按钮，事情开始工作）

下面是JavaScript的

代码

jQuery(document).ready(function(){ 

$(".button_open").click(function() 
{ 
$(this).children().css("display","inline"); 
}); 

$(".button_close").click(function() 
{ 
$(".pop-up").css("display","none"); 
}); 

}); 

的Html

<div class="button_open"> 
<div class="pop-up"> 
    <div class="button_close">X</div> 
Text 
</div> 
</div> 

该页面将有多个弹出窗口每一个包含不同的东西，如果可能的话，我想有这两个函数执行而不是有一吨的功能全部打开/关闭的东西。

所以基本上我想知道是否有使div嵌套

Answer 1

内的关闭按钮功能的任何方式。如果您在您关闭按钮点击 - 你让父也是一个点击。 试着让你的代码，以便：

$(".button_close").click(function(event) 
{ 
    $(".pop-up").css("display","none"); 
    event.stopPropagation(); 
}); 

stopPropagation功能阻止事件的冒泡到父。那么它不应该冒泡给父母，并且不应该引起对父母的点击。请让我知道，如果它没有帮助。