基础菜单按钮不切换类

问题描述

我正在将现有的移动菜单转换为 AMP，但注意到没有 AMP 的功能表现得很奇怪，（请注意，这不是关于放大器的问题，实际上此菜单和按钮的放大器工作正常） .

因此所需的功能是您单击汉堡包，然后切换其类别并变形为十字形并显示菜单。当点击十字架时，按钮会变回汉堡包，菜单被隐藏。

然而发生的事情是第一次点击汉堡包时它会显示菜单并将汉堡包按预期更改为十字，但是当点击十字时菜单被隐藏但按钮仍然是十字，再次单击按钮将打开菜单，但按钮现在是一个汉堡包。因此，实际上菜单在每次点击时都起作用，但按钮在每 2 次点击时发生变化。

如果重要的话，该网站正在使用 wordpress。以下是每次单击按钮时呈现的 html 的简化版本。页面加载后的第一个：

    <a type="button" id="menu-toggle" class="menu-toggle offcanvas__menu__toggle" data-toggle="offCanvas" aria-expanded="false" aria-controls="offCanvas">
        {content removed for brevity}
    </a>
    <div class="off-canvas position-right is-transition-overlap is-closed" id="offCanvas" style="top:62px" data-off-canvas="ji0gvo-off-canvas" data-transition="overlap" aria-hidden="false">
        {content removed for brevity}
    </div>  

第一次点击后：

    <a type="button" id="menu-toggle" class="menu-toggle offcanvas__menu__toggle active" data-toggle="offCanvas" aria-expanded="true" aria-controls="offCanvas">
        {content removed for brevity}
    </a>
    <div class="off-canvas position-right is-transition-overlap is-open" id="offCanvas" style="top:62px" data-off-canvas="ji0gvo-off-canvas" data-transition="overlap" aria-hidden="false">
        {content removed for brevity}
    </div>    

第二次点击后：

    <a type="button" id="menu-toggle" class="menu-toggle offcanvas__menu__toggle active" data-toggle="offCanvas" aria-expanded="false" aria-controls="offCanvas">
        {content removed for brevity}
    </a>
    <div class="off-canvas position-right is-transition-overlap is-closed" id="offCanvas" style="top:62px" data-off-canvas="ji0gvo-off-canvas" data-transition="overlap" aria-hidden="false">
        {content removed for brevity}
    </div>  

第三次点击后：

    <a type="button" id="menu-toggle" class="menu-toggle offcanvas__menu__toggle" data-toggle="offCanvas" aria-expanded="true" aria-controls="offCanvas">
        {content removed for brevity}
    </a>
    <div class="off-canvas position-right is-transition-overlap is-open" id="offCanvas" style="top:62px" data-off-canvas="ji0gvo-off-canvas" data-transition="overlap" aria-hidden="false">
        {content removed for brevity}
    </div>  

第四次点击后：

    <a type="button" id="menu-toggle" class="menu-toggle offcanvas__menu__toggle active" data-toggle="offCanvas" aria-expanded="false" aria-controls="offCanvas">
        {content removed for brevity}
    </a>
    <div class="off-canvas position-right is-transition-overlap is-closed" id="offCanvas" style="top:62px" data-off-canvas="ji0gvo-off-canvas" data-transition="overlap" aria-hidden="false">
        {content removed for brevity}
    </div>  

希望从上面你可以看到模式。我必须单击菜单按钮两次才能切换按钮动画，但每次单击都会显示和隐藏菜单本身。

我的$(document).foundation()就是这样没有选择

那么有没有人知道什么会阻止汉堡按钮中的课程正确切换？

我应该有其他方法吗？

谢谢

解决方法

最终移动菜单被重新设计，问题停止了。