0

我正在尝试使用两个 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 内制作关闭按钮功能

4

1 回答 1

0

如果您单击关闭按钮 - 您也会单击父级。尝试使您的代码：

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

stopPropagation 函数防止事件冒泡到父级。然后它不应该冒泡到父级，也不应该导致触发点击父级。如果没有帮助，请告诉我。

于 2013-02-28T17:58:47.320 回答