汉堡包和侧边栏效果碰撞

Question

我已经在这一段代码上尝试了无数种方法，但似乎无法正常工作。我在我的项目中组合了以下 CSS 和 JavaScript 库：

具体化；归一化；图标；零件;汉堡包 CSS； Modernizr（自定义）； jQuery; Classie.js; sidebarEffects.js;和 SweetAlert。

这是我的代码片段，我运行遇到以下问题：

<div class="sideMenu">
    <button class="hamburger hamburger--collapse" type="button" onclick="this.toggleClass('is-active);"></button>
    <div id="st-trigger-effects">
        <button data-effect="st-effect-11" class="hamburger">
            <span class="hamburger-box">
                <span class="hamburger-inner"></span>
            </span>
        </button>
    </div>
</div>

问题是无论何时单击按钮（汉堡包图标），都会显示菜单，但该图标不会转换为适当的 "is-active" 图标 and/or class ！我实际测试了它，即使 "is-active" class 到位，图标仍然没有改变。

激活的"sideMenu"class，这是给它的CSS代码：

div.sideMenu {
    margin-top: 5%;
    width: 15%;
    height: 10%; 
    position: fixed; 
    margin-left: 5%;
}

请帮忙，非常感谢！

Answer 1

您正在进行以下操作：

<button class="hamburger hamburger--collapse" type="button" onclick="this.toggleClass('is-active);"></button>
<div id="st-trigger-effects">
    <button data-effect="st-effect-11" class="hamburger">
        <span class="hamburger-box">
            <span class="hamburger-inner"></span>
        </span>
    </button>
</div>

应该是：

<div id="st-trigger-effects">
    <button data-effect="st-effect-11" class="hamburger hamburger--collapse" type="button">
         <span class="hamburger-box">
             <span class="hamburger-inner"></span>
         </span>
     </button>
</div>

这将使汉堡包正确转换为活动状态，但是当您点击退出动画状态时，它不会重置汉堡包（因为您通过点击任意位置恢复非动画状态，不是汉堡）。您需要查看该事件并确定将内容从动画状态中恢复出来的回调函数，并通过删除 is-active class.

来重置您的汉堡包图标

汉堡包和侧边栏效果碰撞

Hamburgers and sidebarEffects Collision

html

css

jquery

hamburger-menu