javascript - 如何添加关闭按钮脚本

Question

我正在使用多级推送菜单并尝试添加一个按钮以使其关闭。

基本 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');
 };

这是一个有效的 fiddle : http://jsfiddle.net/xs1j8kq5/3/

当然，我正在使用外部资源。退出按钮的上述代码无法正常运行。

如何关闭侧边栏菜单，如果可能，滚动到网站某处的 anchor ？

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>标记要滚动的位置。

编辑:工作 fiddle : http://jsfiddle.net/xs1j8kq5/24/