Как добавить скрипт закрытия кнопки

Question

Я использую меню Multi Level Push и пытаюсь добавить кнопку, чтобы закрыть ее.

Basic HTML:

<div class="container"> 
     <!-- Push Wrapper --> 
     <div class="mp-pusher" id="mp-pusher"> 
     <!-- mp-menu --> 
      <nav id="mp-menu" class="mp-menu"> 
       <div class="mp-level"> 
       <a class="icon icon-star" href="#" onclick="closeMe();" id="linkk">Exit</a> 
    </div> 
      </nav> 
       <div class="scroller"><!-- this is for emulating position fixed of the nav --> 
       <div class="scroller-inner"> 
        <!-- Top Navigation --> 
<div><a href="#" id="trigger" class="">Button</a></div> 
</div><!-- /scroller-inner --> 
      </div><!-- /scroller --> 
     </div><!-- /pusher --> 
</div><!-- /container --> 

JS:

new mlPushMenu(document.getElementById('mp-menu'), document.getElementById('trigger')); 

function closeMe(){ 
var container = document.getElementById('mp-pusher';); 
classie.remove(container, 'mp-pushed';); 
scrollToAnchor('#link'); 
}; 

Вот рабочая скрипку: http://jsfiddle.net/xs1j8kq5/3/

Я использую внешние ресурсы, конечно. Вышеприведенный код кнопки выхода не работает должным образом.

Как закрыть меню боковой панели и, если возможно, прокрутить до точки привязки где-нибудь на сайте?

Answer 1

Сначала исправьте свой код, как я упомянул в своем комментарии. Существует несколько синтаксических ошибок. И определите closeMe перед тем, как вы его назовете. Теперь scrollToAnchor не работает, определите это до closeMe.

Теперь, когда вы нажали Exit, он не анимирован, но я думаю, теперь вы можете выяснить, что с ним делать, чтобы оживить. http://jsfiddle.net/xs1j8kq5/22/

<script type="text/javascript"> 
    function closeMe() { 
     var container = document.getElementById('mp-pusher'); 
     classie.remove(container, 'mp-pushed'); 
     classie.remove(container, 'mp-pusher'); 
     container.style.transform = "translate3d(+300px, 0px, 0px)"; 
     //scrollToAnchor('#services'); 
    } 
    ; 
</script> 
<div class="container"> 
    <!-- Push Wrapper --> 
    <div class="mp-pusher" id="mp-pusher"> 
     <!-- mp-menu --> 
     <nav id="mp-menu" class="mp-menu"> 
      <div class="mp-level"> 
       <a class="icon icon-star" href="#" onclick="closeMe();" id="linkk">Exit</a> 
      </div> 
     </nav> 
     <div class="scroller"><!-- this is for emulating position fixed of the nav --> 
      <div class="scroller-inner"> 
       <!-- Top Navigation --> 
       <div><a href="#" id="trigger" class="">Button</a></div> 
      </div><!-- /scroller-inner --> 
     </div><!-- /scroller --> 
    </div><!-- /pusher --> 
</div><!-- /container --> 

Для прокрутки, вам необходимо определить <a name="services"></a> тег, где вы хотите прокрутки.

редактировать: работа скрипки: http://jsfiddle.net/xs1j8kq5/24/

Answer 2

Как вы упомянули jQuery в тегах, вот короче JQuery эквивалент коды (который не требует обработчика событий атрибута на основе):

new mlPushMenu($('#mp-menu')[0], $('#trigger')[0]); 
$(function() { 
    $('#linkk').click(function(e) { 
     e.preventDefault(); // Stop any scrolling to the bookmark link 
     classie.remove($('#mp-pusher')); 
     classie.remove($('#mp-pushed')); 
     scrollToAnchor('#services'); 
    }); 
}); 

JSFiddle:http://jsfiddle.net/TrueBlueAussie/xs1j8kq5/23/

Answer 3

вы должны определить свой 'триггер', когда вы создать экземпляр 'mlPushMenu'
Так, только состояние:

new mlPushMenu(document.getElementById('mp-menu'), 
document.getElementById('trigger')) 

заменить идентификатор вашей кнопки.

В данном конкретном использовании случае 'linkk ':

new mlPushMenu(document.getElementById('mp-menu'), 
document.getElementById('linkk')) 

Вы можете использовать класс, и влияют на столько' ' S, как вы хотите:

new mlPushMenu(document.getElementById('mp-menu'), 
document.getElementsByClassName('menu-trigger'));