jQuery Click event selector not working

[georgearnall]

Hi,

I am quite new to jQuery but I know my way around (ish).

I could try and explain it but it is easier to show you a [pen](http://cdpn.io/jDcGJ “pen”).

I want it so that when a user clicks on the mobile navigation toggle the menu should slide in from the side. Then if the user wants to close the navigation they can just tap anywhere on the page content (.page-wrap) and it will slide away again.

My problem is that I can only get it to hide by pressing the toggle again. I have tried to apply a class to a parent of both the menu and the content elements and using selectors write click event functions but it does not seem to be working.

Thanks for any help

[Kuzyo]

Hi @georgearnall

I’m new to JS/jQuery too. Here how I fix your problem, have hope it will help http://codepen.io/Kuzyo/pen/FGIKt
I little rewrited your classes for better understanding whats going on )

[georgearnall]

Thank you so much, this had been driving me crazy! I had tried a few methods but every time there was some kind of problem. Thanks for you help

[Kuzyo]

Thank you, it was a good lesson for me too

[georgearnall]

Just realised I have made a mistake in my HTML and so this is still not working.

I placed the span toggle outside of the page wrap when actually it should be inside. I have updated my [copepen](http://cdpn.io/KjtAw “codepen”). Any ideas ?

Thanks

[Kuzyo]

Is it very important to put span toggle to page-wrap? Why?

[georgearnall]

It is essential that the toggle goes inside the page wrap just because it is the only way the design would work. What I would rather focus on is why my current selector doesn’t work.. I’m no jQuery master but I don’t understand what the problem is.

[Kuzyo]

I know where problem is, but don’t know how to fix: if you write

$(“.page-wrap).on(“click”, function() {
$(“.wrapper”).removeClass(“active”);
})

it removing class .active in the same time as it added after:

$(“.nav-toggle”).on(“click”,function() {
$(“.wrapper”).toggleClass(“active”);
})

because nav-toggle inside page-wrap.

Have hope it makes sense for you. Sorry for english (

[georgearnall]

I found out the problem. [Here is the updated code](http://codepen.io/anon/pen/HJfxE “http://codepen.io/anon/pen/HJfxE”).

Thanks for your help

[Author]

Posts