Question

我的问题是这里的jsfiddle：

基本上，如果你试图关闭窗口，它就不会这样做。

如果我删除了js的show（）部分，它将关闭它！

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

有些东西告诉我这是一个非常简单的修复，但我找不到答案！

提前致谢

Answer 1

printerMenuClose点击事件冒泡并再次显示printerMenu。隐藏它会阻止事件传播。

这应该有效

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

小提琴here

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

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

Answer 2

使用e.stopPropagation();停止活动 bubbling

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

DEMO

阻止事件冒泡DOM树，防止任何事件家长处理人员被告知该事件。

Answer 3

试试这个<div id="printer">Open Me </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>

演示： http://jsfiddle.net/wPEhW/14/

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();
    });
});

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/ 当您点击“＆＃39;关闭我＆＃39;父母的点击事件也会被解雇。

Answer 6

请参阅此Demo

<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();
    });
});

Answer 7

试试这个：

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

jQuery hide（）不隐藏div

7 个答案:

DEMO