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函数可防止事件冒泡到父级。然后它不应该冒泡到父级，不应该引起点击父级的火灾。如果它没有用，请告诉我。

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

1 个答案: