jQuery hide()不隐藏div

Question

我有一个问题，这里是一个jsfiddle:

http://jsfiddle.net/luisfalcon/wPEhW/

基本上，如果你尝试关闭窗口，它不会关闭。

如果我删除js中的show()部分，它将关闭！

$(document).ready(function () {
    $("#printer").click(function () {
        $("#printerMenu").show();
    });
    $("#printerMenuClose").click(function () {
        $("#printerMenu").hide();
    });
});

我感觉这只是一个非常简单的修复，但我找不到答案！

提前感谢。

- Luis Falcón

Answer 1

点击 printerMenuClose 事件会冒泡并再次显示打印机菜单。要隐藏它，请停止事件传播。

这应该有效

$(document).ready(function () {
    $("#printer").click(function () {
        $("#printerMenu").show();
    });
    $("#printerMenuClose").click(function (e) {
        $("#printerMenu").hide();
        e.stopPropagation();
    });
});

在这里试验代码。

你还可以阅读更多关于事件传播的信息：

http://api.jquery.com/event.stoppropagation/

- Alok Swain

---

在阅读了几分钟有关事件冒泡和事件捕获的内容后，我终于明白了，非常感谢Alok... - Luis Falcón

Answer 2

使用e.stopPropagation();来停止事件冒泡

 $("#printerMenuClose").click(function (e) {
    e.stopPropagation();  // Prevents the event from bubbling up the DOM tree
    $("#printerMenu").hide();
});

演示

防止事件冒泡到DOM树，避免任何父级处理程序收到该事件的通知。

- Balachandran

Answer 3

尝试这个：<div id="printer">打开我</div> 您代码中的printer div是打印机菜单的父级，因此单击任何子元素也会触发单击事件。您可以更改HTML以使其不再是printer menu div的父级。这称为事件冒泡。

<div id="printer">Open Me </div>
  <div id="printerMenu" class="menuPOP">
    <div class="menuPOPTit">Example Title
        <div id="printerMenuClose" class="menuPOPTitClose">Close Me</div>
    </div>

</div>

Demo : http://jsfiddle.net/wPEhW/14/

- Krish R

Answer 4

尝试使用以下代码：

$(document).ready(function () {
    $("#printer").click(function () {
        $("#printerMenu").show();
    });
    $("#printerMenuClose").click(function (e) {
        e.stopPropagation();//Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
        $("#printerMenu").hide();
    });
});

- stylishCoder

Answer 5

你只需要在脚本中进行两个更改：

$(document).ready(function () {
    $("#printer").click(function () {
        $("#printerMenu").show();
    });
    $("#printerMenuClose").click(function (e) { //Add the event variable e
        $("#printerMenu").hide();
        e.stopPropagation(); //stop the event from bubbling to the parent
    });
});

http://api.jquery.com/event.stoppropagation/当你点击"close me"时，父元素的点击事件也会被触发。

- Anurag

Answer 6

请查看此演示

<div id="printer"> 
     <span class="open">Open Me</span>
    <div id="printerMenu" class="menuPOP">
        <div class="menuPOPTit">Example Title
            <div id="printerMenuClose" class="menuPOPTitClose">Close Me</div>
        </div>
    </div>
</div>

$(document).ready(function () {
    $(".open").click(function () {
        $("#printerMenu").show();
    });
    $("#printerMenuClose").click(function () {
        $("#printerMenu").hide();
    });
});

- ShibinRagh

---

如果我们有更多的 open 类元素，它不会继续打开菜单吗？ - nraina

Answer 7

试试这个：

$(document).ready(function () {
    $("#printer").click(function () {
        $("#printerMenu").show();
    });
    $("#printerMenuClose").click(function () {
       // $("#printerMenu").hide();
        $("#printerMenu").css("visibility", "hidden");
    });
});

- learner420

---

.show() 函数会改变元素的 display 样式，但不会对使用 visibility 产生任何影响。尝试一下吧。 - nraina