单击菜单项后，汉堡菜单返回 3 个链接答案

【问题标题】：Burger menu back to 3 links after menu item is clicked单击菜单项后，汉堡菜单返回 3 个链接
【发布时间】：2015-07-31 18:22:15
【问题描述】：

我有一个汉堡图标，点击后会变成 X。再次点击时会变回 3 行。我让它工作，所以当点击链接时菜单消失，但汉堡菜单不会返回到 3 行。我没有尝试过任何工作。这是我所拥有的。

var burgerIcon = $('.burger-icon');

function toggleBurger(){
    burgerIcon.click(function(){
        if(burgerIcon.hasClass("is-active") === true)
        {
            burgerIcon.removeClass("is-active");
            //console.log("remove");
        }
        else
        {
            burgerIcon.addClass("is-active");
            //console.log("add");
        }
    });
}

toggleBurger();

$('.toggle-nav').click(function() {
    $('body').toggleClass('show-nav'); 
    return false;
});

$('nav ul li > a').click(function(){
    //console.log("clicked");;
    $('body').trigger( "click" );
    burgerIcon.trigger( "click" );
});

HTML：

<nav>
<ul data-magellan-expedition="fixed">
                        <li data-magellan-arrival="work">
                            <a href="#work" class="hvr-sweep-to-right">Work</a>
                        </li>

                        <li data-magellan-arrival="about">
                            <a href="#about" class="hvr-sweep-to-right">About</a>
                        </li>

                        <li data-magellan-arrival="shadow">
                            <a href="#shadow" class="hvr-sweep-to-right">Shadow CC</a>
                        </li>

                        <li data-magellan-arrival="clients">
                            <a href="#clients" class="hvr-sweep-to-right">Clients</a>
                        </li>
                    </ul>
                </nav>

这是我试图解释的一个小插曲：jsFiddle

【问题讨论】：

创建一个 jsfiddle 示例
您的问题令人困惑。您是说在单击链接（<a> 标记）时希望 .c-hamburger 删除其 is-active 类？为什么不把它放在点击函数中呢？
这里有一个fiddle给你一个想法。你可以点击汉堡图标，你也可以再次点击关闭它。如果单击链接，菜单会消失，但汉堡图标保持打开状态jsfiddle.net/qe38m0t9
这条线应该是有条件的吗？还是任务？请澄清：(this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active");
我用它作为汉堡动画的起点。那是我从那里得到脚本的地方。callmenick.com/post/animating-css-only-hamburger-menu-icons

标签： javascript jquery html hamburger-menu

【解决方案1】：

由于您在代码中使用 jQuery，因此您可以利用它，然后我相信您真正需要的就是：

$('nav ul li > a,.c-hamburger').click(function () {
    console.log("clicked");
    $('body').toggleClass('show-nav');
    if ($('body').hasClass('show-nav')) {
        $('.c-hamburger').addClass("is-active");
    } else {
        $('.c-hamburger').removeClass("is-active");
    }
});

更新小提琴：http://jsfiddle.net/qe38m0t9/2/

注意：这使用了两个选择器，一个用于“汉堡包”，另一个用于用逗号分隔的菜单，然后根据单击的内容执行相同的操作。

【讨论】：