0

I've been trying to make it so my nav will hide when the user clicks off. I've only managed to get so far and I'm obviously doing something wrong.

This is what I have so far:

Without body click http://jsfiddle.net/yL45ds8j/

Attempting body click (it just hides it immediately) http://jsfiddle.net/yL45ds8j/1/

Code:

function handler1() {
    $('.headnav').addClass('open').animate({
        top: "0"
    },400);            
    $(this).addClass('open');
    $(this).one("click", handler2);
}
function handler2() {
    $('.headnav').removeClass('open').animate({
        top: "-100%"
    },400);
    $('.menuBtn').removeClass('open');
    $('.menuBtn').one("click", handler1);
}             

$(".menuBtn").one("click", handler1);

$('body').click(function(event) { 
    if(!$(event.target).closest('.headnav.open').length) {
        if($('.headnav').hasClass("open")) {
            $('.headnav').removeClass('open').animate({
                top: "-100%"
            },400);
        }
    }             
});

Does anyone have any suggestions how I could fix this? Many thanks

user1788364
  • 1,141
  • 3
  • 19
  • 33
  • 1
    Something like [this fiddle](http://jsfiddle.net/yL45ds8j/2/)? – Regent Feb 19 '15 at 09:29
  • Not sure if it's a bulletproof solution: http://jsfiddle.net/yL45ds8j/4/. You have to check this post: http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element?page=1&tab=active#tab-top – emmanuel Feb 19 '15 at 09:32
  • Try this . Cleaner solution. http://jsfiddle.net/yL45ds8j/5/ – snehatulsi Feb 19 '15 at 09:44

1 Answers1

2

The click event of menuBtn bubbles up to the body, and the handler of body click event closes it. Please stop the propagation of event in the menuBtn handlers.

e.stopPropagation();

Fiddle: http://jsfiddle.net/yL45ds8j/8/

This is much cleaner solution: jsfiddle.net/yL45ds8j/6

snehatulsi
  • 251
  • 1
  • 12
  • Sorry for that. Well this check wont make unnecessary .removeClass() and .animate() on every body click. http://jsfiddle.net/yL45ds8j/6/ – snehatulsi Feb 19 '15 at 09:56
  • That's much better. But you still forgot to toggle class "open" for `$('.menuBtn')` in http://jsfiddle.net/yL45ds8j/6/. – Regent Feb 19 '15 at 09:59
  • Thanks so much to both of you this has been really interesting! I really like both of your solutions! It amazes me how there are so many different ways of doing things. I think I understand how Regent is doing his but I'm not entirely sure how yours works snehatulsi.. what does length do? How does .length == 0 / .length > 0 work - what is it checking for? – user1788364 Feb 19 '15 at 10:11
  • 1
    length checks for presence of div with class '.headnav.open'. If this element is found, it returns the div and thus length of result is greather then 1. else it returns empty array, resulting in length 0. – snehatulsi Feb 19 '15 at 10:13
  • @user1788364 try and see executing these lines in console , and you can view, how the code works. – snehatulsi Feb 19 '15 at 10:13
  • Thank you! So because the div is off the screen it doesn't see it? Also why is it better to use toggle instead of add/removeclass? – user1788364 Feb 19 '15 at 10:16
  • toggle internally checks and does add/remove. so if u use toggle u dont have to check for the presence and do show/hide, meaning fewer code of lines for u. – snehatulsi Feb 19 '15 at 10:17