CODEWITHSUNDEEP
jqueryhtml
Luis Falcón
Luis Falcón

Reputation: 53

jQuery hide() not hiding div

I have the problem is a jsfiddle here:

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

Basically if you try to close the window it won't do it.

If I remove the show() section of the js it will close it! 

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

Something tells me that this is a very simple fix but I can't find the answer!

Thanks in advance

Upvotes: 3

Views: 9519

Answers (7)

Krish R
Krish R

Reputation: 22711

Try this, <div id="printer">Open Me </div>

The printer div in your code was the parent for the printer menu, so clicking any child would also cause the click event to be fired. You can change the HTML so that it no longer the parent for the printer menu div. This is called event bubbling. 

<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/

Upvotes: 3

Anurag
Anurag

Reputation: 348

You only need to make two changes in the script:

$(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/ When you click the' close me' the click event of the parent also gets fired.

Upvotes: 1

learner420
learner420

Reputation: 182

try this: 

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

Upvotes: 0

stylishCoder
stylishCoder

Reputation: 385

Try this below code

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

Upvotes: 3

ShibinRagh
ShibinRagh

Reputation: 6646

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

Upvotes: 0

Balachandran
Balachandran

Reputation: 9637

use e.stopPropagation(); to stop event bubbling 

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

DEMO

Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

Upvotes: 3

Alok Swain
Alok Swain

Reputation: 6519

printerMenuClose click event bubbles up and it shows the printerMenu again. To hide it stop the event propagation.

This should work

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

Fiddle here

You can also read more about event propagation:

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

Upvotes: 10

Related Questions