toggleClass로 모바일 메뉴 닫기 관련 문제

Question

모바일 메뉴로 문제를 해결하려고합니다. 이것은 내가 만든 웹 사이트가 아니기 때문에 개발자 코드에 익숙하지 않습니다. 문제는 쉽게 해결할 수있을 것이라고 생각했지만 해결할 수는 없습니다. 기본적으로 주 메뉴 버튼을 클릭하면 드롭 다운 메뉴가 나타납니다. 주 메뉴를 두 번 클릭 할 때까지 유지됩니다. 메뉴의 다른 페이지 중 하나를 클릭 할 때마다 메뉴를 닫는 것이 이상적입니다. 즉, 메뉴를 클릭하면 드롭 다운 메뉴가 열리고 '집'또는 '정보'를 클릭하면 메뉴가 사라집니다.

웹 링크 또는 실제 파일을 제공 할 수 없습니다. 나는 바이올린을 만들려고했으나 작동시키지 못했습니다. 나는 이것에 조금 새롭다, 그래서 나는 사과한다. 너가 나를 도울 수 없으면, 나는 이해한다. 나는 정말로 시도할만한 제안을 찾고있다.

<nav role="navigation" class="menu main-menu”> 
    <span class="menu-switch">MAIN MENU</span> 
    <ul> 
     <li> 
      <a href=“#home”>Home</a> 
     </li> 
     <li> 
      <a href=“#about”>About</a> 
     </li> 
     <li> 
      <a href=“#contact”>Contact</a> 
     </li> 
    </ul> 
</nav> 

toggleClass 기능이 오프에 메뉴를 전환하는 데 사용되는 : 말했다

, 여기에 내가 작업하고있는 HTML의 밑그림이다.

$('span.menu-switch').click(function(){ 
    $(this).toggleClass('open'); 
    }); 

'open'클래스는 드롭 다운의 CSS 스타일을 참조합니다.

내가 지금처럼, 다른, 다양한 페이지에 toggleClass을 적용하는 시도가 :

$('li a#home').click(function(){ 
    $(this).toggleClass('open'); 
    }); 

내 추론은 다른 페이지의 링크 중 하나를 toggleClass를 두 번 클릭하면 '열기'클래스를 제거하는 것이라고했다 메뉴를 닫습니다. 나는 다른 셀렉터를 가지고 노는 것과 같은 변형을 시도해 봤지만, 나에게는 효과가없는 것 같다. 기타 유용한 정보를 제공 할 수 있는지 알려 주시기 바랍니다. 건설적인 제안에 감사드립니다. 시간 내 주셔서 대단히 감사합니다.

문제가 해결되었습니다.

$('li a').on('click', function() { 
     $('span.menu-switch').removeClass('open'); 
    }); 

Answer 1

<span class="menu"></span> 
      <div class="top-menu"> 
       <ul>           
        <li><a class="active" href="index.html">Naslovna</a></li> 
        <li><a href="cenovnik.html">Cenovnik</a></li> 
        <li><a href="usluga.html">Usluge</a></li> 
        <li><a href="prijatelji.html">Prijatelji</a></li> 
        <li><a href="http://potrcko.net/magazin">Magazin</a></li> 
        <li><a href="http://potrcko.net/kuvar">Kuvar</a></li> 
        <li><a href="kontakt.html">Kontakt</a></li> 
       </ul> 
      </div> 

      <!-- script for menu --> 
      <script> 
      $("span.menu").click(function(event) { 
       $(".top-menu").slideToggle("slow", function() { 
       // Animation complete. 
       }); 
      }); 
     </script>