javascript - 单击 li 时关闭菜单

Question

我正在制作单页网站。当我打开我的菜单并单击一个 li 项目时，我希望我的菜单关闭。

目前，当我再次点击“menu-burger-wrapper”时它正在工作，我想在我点击项目 li 时设置相同的东西。

这是我的代码:

$(document).ready(function() {

    $('#menu-burger-wrapper').click(function(e) {
        e.preventDefault();
        $this = $(this);
        if ($this.hasClass('is-opened')) {
            $this.addClass('is-closed').removeClass('is-opened');
        } else {
            $this.removeClass('is-closed').addClass('is-opened');
        }
    })
});

<nav class="menu-base" id="menu-base">
    <ul class="menu-item">
        <a id="en-cours" class="work_menu link link--over">
            <li>works</li>
        </a>
        <a class="about_menu link link--over">
            <li>about</li>
        </a>
        <a class="link link--over">
            <li>contact</li>
        </a>
    </ul>
</nav>
<!-- Header -->
<div id="header">
    <!-- Menu -->
    <div id="menu-burger-wrapper">
        <div id="menu-burger">
            <div class="line line-1"></div>
            <div class="line line-2"></div>
            <div class="line line-3"></div>
        </div>
    </div>

Answer 1

试试这个 - 只需将点击处理程序附加到 li 元素即可。

var clickHandler = function (e) {
    e.preventDefault();
    $this = $(this);
    if ($this.hasClass('is-opened')) {
        $this.addClass('is-closed').removeClass('is-opened');
    } else {
        $this.removeClass('is-closed').addClass('is-opened');
    }
};

//attaching the event to both, together.
$('#menu-burger-wrapper, ul.menu-item li').on('click', clickHandler);