jQuery 메뉴 관리 (함수) - 열기 및 닫기

Question

여기에서 얻은 jQuery 기반 CSS3 메뉴 시스템이 있습니다. (http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/)이 인상적인 메뉴를 내 사이트 탐색의 일부로 사용하고 있지만 문제가 발생했습니다. 내가 링크를 많이 가지고 있으므로이 메뉴 중 하나 이상을 표시하고 싶습니다.

JQuery와 코드는

 <script> 
     $(function() { 
      $('#dl-menu').dlmenu({ 
       animationClasses : { classin : 'dl-animate-in-2', classout : 'dl-animate-out-2' } 
      }); 
        $('#dl-menu2').dlmenu({ 
       animationClasses : { classin : 'dl-animate-in-2', classout : 'dl-animate-out-2' } 
      }); 
     }); 
    </script> 

내 질문은 메뉴 2 일 때 나는 메뉴 1 닫기를 할 수있는 방법이다 (I 두 메뉴하지 하나를 사용하고있어 #의 DL-메뉴 2 보여주는주의) 다음과 같습니다 열렸어? 메뉴 1을 클릭하는 순간 메뉴가 열리지 만 메뉴 2를 클릭하면 메뉴가 닫히지 않습니다.

Answer 1

dlmenu 코드는 재미있는 일이며 일단 초기화되면 함수를 실행하기위한 문자열로 다시 호출 할 수 있습니다. 따라서 자동으로 $(function(){...}을 변경하여 메뉴를 엽니 다 자식 저장소 (here)에서 index.html을 변경할 수 있습니다 : 당신은 또한 메뉴를 닫으 위를 사용할 수 있습니다

$(function() { 
    $('#dl-menu').dlmenu(); 
    $('#dl-menu').dlmenu("openMenu"); 
}); 

. 그러나 dlmenu 코드에 리스너를 추가 할 수있는 메커니즘을 찾을 수 없었습니다. 당신이에 의해 닫 원하는대로 메뉴를 지정할 수 있도록

$('#dl-menu').dlmenu("closeMenu"); 

'#dl-menu'이 당신의 메뉴 DIV의 ID에 대한 참조입니다 :

그래서 최선의 해결책은 다음과 자신을 추가하고 활용하는 것입니다 신분증.

다른 메뉴를 클릭하면 까다로운 부분이 수신기를 실행합니다. 이것은 dlmenu의 논리가 지워지고 메뉴가 열릴 때마다 $ (body)에 대한 클릭을 설정한다는 점에서 복잡합니다. 가장 쉬운 방법은 버튼에 ID를 추가하는 것입니다. index.html에서 현재의 논리는 다음과 같습니다

<button id="dl-menu1-button" class="dl-trigger">Open Menu</button> 

그런 다음 다음 (추가 한 추정을 수행 할 $(function() {...}을 변경할 수 있습니다

<button class="dl-trigger">Open Menu</button> 

그것은 어떤 ID가 있으므로 사용자가 정의한 각 메뉴에 대한 하나를 추가하지 않았다

$(function() { 
    $('#dl-menu1').dlmenu(); 
    $('#dl-menu2').dlmenu(); 

    $('#dl-menu1-button').on("click", function() { 
     $('#dl-menu2').dlmenu("closeMenu"); 
    }); 
    $('#dl-menu2-button').on("click", function() { 
     $('#dl-menu1').dlmenu("closeMenu"); 
    }); 
}); 

나는 getti에서 위의 테스트했습니다 : 다른 메뉴를 사용하면 dl-menu1 및 dl-menu2)을 가지고있는 ID의 이러한 변경 git 저장소의 복제본을 만들고, id를 추가하고 위와 같이 init을 변경합니다. 당신이 어떻게 물었는지 일했습니다.