單擊菜單項后，漢堡菜單返回3個鏈接

Question

我有一個漢堡圖標，當點擊變成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

Answer 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/

注意：這使用兩個選擇器，一個用於“漢堡包”，另一個用於由逗號分隔的菜單，然后根據點擊的內容執行相同的操作。