Question

我在我的网站上使用汉堡包css https://jonsuh.com/hamburgers/作为我的汉堡包菜单。打开和关闭动画工作正常，它可以正确打开/关闭materializecss sidenav。

然而，sidenav具有在您点击页面上的任何位置时关闭的功能，而不仅仅是汉堡包图标。当sidenav菜单也关闭时，如何触发汉堡包css图标以关闭动画？

我找不到sidenav关闭的状态。我相信最好的方法是找到sidenav的状态，然后触发汉堡包CSS上的toggleClass来进行近距离动画。

jquery初始化sidenav和hamburgercss

Template.Top_navbar.onRendered(function () {    
('.button-collapse').sideNav(
            {
                edge: 'right',
                closeOnClick: true,
                draggable: true // Choose whether you can drag to open on touch screens
            }
        );
        $(".hamburger").on("click", function (e) {
            $(".hamburger").toggleClass("is-active");
            // Do something else, like open/close menu
        });
}

顶栏的HTML，其中包含汉堡包css图标

<template name="Top_navbar">
    <nav class="main-nav dm-gray base " role="navigation">
        <div class="nav-wrapper p-l-20 p-r-20">
            <a id="logo-container" href="/" class="left dm-logo hide-on-small-only"></a>
            <a id="logo-container-small-screen" href="/" class="left hide-on-med-and-up"></a>
            <span class="page-title-content p-l-20 m-l-20 m-t-20 left">{{ pageTitle }}</span>
            <button data-activates="nav-mobile" class="hamburger hamburger--squeeze show-on-large button-collapse sidebar-btn right" type="button">
              <span class="hamburger-box">
                <span class="hamburger-inner"></span>
              </span>
            </button>
        </div>
    </nav>
</template>

MaterialiseCSS Side-Nav信息http://materializecss.com/side-nav.html

更新

所以我无法找到MaterialiseCSS触发侧导航器关闭的位置。所以现在我才使用这个解决方案：

$(document).on("click", function(e) {
        if($hamburger.hasClass("is-active")){
            $hamburger.removeClass("is-active");
        }
    });

我知道它不是最漂亮或最有效的解决方案。如果我找到更好的东西，我会更新这篇文章。

Answer 1

根据物化未公开javascript的行2528 — 2530：

$ elem.sideNav（'hide'）：


隐藏：功能（）{
    $（"#sidenav-overlay"）触发（'click'）;
    }

如果#sidenav-overlay被用户点击或由$ elem.sideNav（'hide'）触发，则会点击#sidenav-overlay。
所以答案是在页面加载和侧面导航初始化之后将点击处理程序绑定到$('.button-collapse').click(function(){ $('.hamburger').addClass('is-active'); }); $('.sidenav-overlay').click(function(){ $('.hamburger').removeClass('is-active'); })，如下所示：

FragmentOne fragment = new FragmentOne();

fragmentTransaction.add(R.id.fragment_container, fragment);

Answer 2

我简单地说 $('#hamburger').removeClass('is-active'); 在未确定的JS的第2242行之后和 $('#hamburger').addClass('is-active'); 在第2644行之后

不是很干净，但很容易，而且工作正常。

关闭MaterialiseCSS sidenav时动画汉堡包CSS？

2 个答案: