汉堡包和侧边效应碰撞

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"类放在适当的位置，图标仍然没有改变。

活动的"sideMenu"类，这是它的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类来重置汉堡包图标。