Mam problem z menu w JS. Teoretycznie ono działa, ale za drugim razem już przestaje. Czasem działa kilka razy i zonk. Nie mam pojęcia o co tu chodzi, gdyż nie jestem doświadczony z tej tematyki a projekt jest jednorazowy.

Podglad:
http://viamarimar.cba.pl/green/

1. Gdy kliasz ikone Menu dziala (nieskonczonosc razy)
2. Klikniesz szukajke przestaje widac sam .top-overlay
3. To samo w druga strone mozesz klikac szukajke x razy nic nie bedzie , po czym klikniesz druga ikone i wszystko sie psuje (menu znika - doslownie)

4. Osobny problem jest jest z wyjsciem z menu po kliknieciu w overlay - klikasz i menu znika? wtf

5. albo nie działa nic tylko widać tło po kliknięciu w ikone

TU kod js:

[PHP] pobierz, plaintext 
 //MENU SLIDE
        $('#nav-expander').on('click',function(e){
      		e.preventDefault();
			$("#search").css("display", "none");
      		$('body').toggleClass('nav-expanded');
			$(".top-overlay").css("display", "block");
      	});
      	$('#nav-close').on('click',function(e){
      		e.preventDefault();
			$('body').removeClass('nav-expanded');	
			$(".top-overlay").css("display", "none");
      	});
 
 
		//SEARCH SLIDE
		 $('#nav-search').on('click',function(e){
      		e.preventDefault();
			$("#menu").css("display", "none");
      		$('body').toggleClass('nav-search');
			$(".top-overlay").css("display", "block");
      	});
      	$('#nav-search-close').on('click',function(e){
      		e.preventDefault();
      		$('body').removeClass('nav-search');
			$(".top-overlay").css("display", "none");
      	});
 
 
		$('.top-overlay').on('click', function(e) {
			$(".top-overlay").css("display", "none");
			$('body').removeClass('nav-search');
			$('body').removeClass('nav-expanded');	
		});
[PHP] pobierz, plaintext 

Prosze o wskazanie gdzie popełniam błąd.