CODEWITHSUNDEEP
javascriptjqueryhtmlcsstoggle
user2099810
user2099810

Reputation: 381

Menu toggle icon bug

I've created a menu with an animated icon and if you click on that icon the menu opens with 2 columns. Now when you click on the icon the menu opens and closes. Now what i wanted to do is when you click on some link in the right column ( see jsfiddle ) i want the menu to disappear again.

Now that's working great the only problem is that when you click on some link the icon toggles too and you have to press it again two times in order for the menu to work again.. ( so only when you press on 'some link' in the right column of the menu )

Any help is appreciated ( sorry for the messy code ) 

$("#menuBtn").click(function(){
$("a.menuIcon").toggleClass("selected");
});

var elem = $('#menuBtn');

elem.toggle(function () {
        $('#menuContainer').animate({ opacity: '1'}, 'fast');
        $('#menuContainer').css({ "z-index": "999999"});
}, function () {
        $('#menuContainer').animate({ opacity: '0'}, 'fast');
        $('#menuContainer').css({ "z-index": "-1"});
});

$("#menu_right").click(function(){
$("a.menuIcon").toggleClass("selected");
$('#menuContainer').animate({ opacity: '0'}, 'fast');
});

See http://jsfiddle.net/QM635/

Upvotes: 1

Views: 79

Answers (1)

j08691
j08691

Reputation: 207891

I'd just change your last click handler to:

$("#menu_right").click(function () {
    $("#menuBtn").click();
});

jsFiddle example

Upvotes: 1

Related Questions