jQuery menu not hiding on second click

Question

I am trying to learn some jquery and I want to make a simple drop down that is hidden at the start but then appears when you click some text but then hides when you click it again. Here is the Code:

Basic HTML:

<h1 class="Menu">Menu</h1>

    <div id="submenu">
        <ul>
            <a href="#"><li>Menu 1</li></a>
            <a href="#"><li>Menu 2</li></a>
            <a href="#"><li>Menu 3</li></a>
            <a href="#"><li>Menu 4</li></a>
            <a href="#"><li>Menu 5</li></a>
            <a href="#"><li>Menu 6</li></a> 
        </ul>
    <div>

The jQuery:

$(document).ready(function() {
   $("#submenu").hide(); 
});

$(".Menu").click(function() {
    $("#submenu").show("slow");
    $(".Menu").text("Close Menu");
    $(".Menu").removeClass( "Menu" ).addClass( "CloseMenu" );
});
$(".CloseMenu").click(function() {
    $("#submenu").hide();
    $(".CloseMenu").text("Menu");
    $(".CloseMenu").removeClass( "CloseMenu" ).addClass( "Menu" );
});

Is it because the class wasn't registered into the DOM at page load so it doesn't know what it is looking for? Also here is the JS Fiddle I was doing it in.

When you call the `click` function, AT THAT TIME, jquery appends the click handler to the elements that match your selector. This means that if you dynamically change an element later on to match the same selector, the click handler will not be applied retroactively. Take a look at http://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements for information on how to do this for dynamically changing elements. — , Sep 18 '13 at 17:02

score 3 · Accepted Answer · answered Sep 18 '13 at 17:04

Here, use this js code

$(document).ready(function() {
   $("#submenu").hide(); 
});

$("#mainmenu").click(function() {
    if($("#submenu").is(":hidden")){
        $("#submenu").show("slow");
        $(".Menu").text("Close Menu");
        $(".Menu").removeClass( "Menu" ).addClass( "CloseMenu" );
    }
    else{
        $("#submenu").hide();
        $(".CloseMenu").text("Menu");
        $(".CloseMenu").removeClass( "CloseMenu" ).addClass( "Menu" );
    }
});

Reason for not working is that you are changing the class at runtime. Use .click, only when you have static selectors. Like i used ID

oh wow this is awesome! I had no idea you could do conditionals like that natively in jQuery, but now I know. Thanks Maverick! — David F., Sep 18 '13 at 17:11

score 1 · Answer 2 · edited Oct 17 '16 at 19:48

1

Try .toggle()

$('.Menu').toggle( 
  function() {
    //Do something
}, 
  function() {
    //Do Something Else
});

Also try #submenu{display:none;} instead of jQuery.

edited Oct 17 '16 at 19:48

marc_s

732,580
175
1,330
1,459

answered Sep 18 '13 at 17:07

jeanhules

235
5
16

score 1 · Answer 3 · answered Sep 18 '13 at 17:07

since CloseMenu class doesn't exist when you bind this event you need to do:

$(document).on('click', ".CloseMenu", function() {
  $("#submenu").hide();
  $(".CloseMenu").text("Menu");
  $(".CloseMenu").removeClass( "CloseMenu" ).addClass( "Menu" );
});

jQuery menu not hiding on second click

3 Answers3