CODEWITHSUNDEEP
jquery
user1444027
user1444027

Reputation: 5241

Show responsive menu with one click instead of two

I have come up with the following to show (scrollDown) a menu when a .menubutton is clicked and to hide (scrollUp) the menu again when a link is clicked within the menu:

var navi = $('#navigation').hide();

$('.menubutton').toggle(function() {
    navi.slideDown();
}, function() {
    navi.slideUp();
});

$('#navigation a').click(function() {
    navi.slideUp();
});

The problem is, if a menu link has been clicked, the .menubutton has to be clicked TWICE to display (scrollDown) the menu again.

Any idea why this is? I want .menubutton to respond with 1 click each time.

Upvotes: 1

Views: 91

Answers (2)

freejosh
freejosh

Reputation: 11383

You're calling slideUp directly when clicking a navigation element, so the .menubutton toggle is still in a state where it will also call slideUp on its next click. Try invoking the .menubutton's click instead:

$('#navigation a').click(function() {
    $('.menubutton').click();
});

Upvotes: 2

gen_Eric
gen_Eric

Reputation: 227190

.menubutton is on a toggle. So it calls one function, then the other, and so on. Instead of using .toggle, try using .slideToggle.

$('.menubutton').click(function() {
    navi.slideToggle();
});

Upvotes: 2

Related Questions