如何在单击锚点后关闭汉堡菜单

Question

如何在单击锚点后关闭汉堡菜单

5

首先，如果我的英语不够好，请您谅解。现在我有一个问题，我想做一个汉堡菜单，以下是代码，但是当单击锚点时，我想将菜单关闭。我已经编写了打开菜单的代码，但是我还想让它在单击锚点时关闭，并且在选定的锚点上使用“section”标签。

<!DOCTYPE html>
<html>
    <head>
      <style>
        body
        {
            background-color: gray;
        }
        .menu__toggler 
        {
            position: absolute;
            top: 20px;
            left: 50%;
            z-index: 999;
            height: 28px;
            width: 28px;
            outline: none;
            cursor: pointer;
            display: -webkit-box;
            display: flex;
            -webkit-box-align: center;
                    align-items: center;
        }
        .menu__toggler span, .menu__toggler span::before, .menu__toggler span::after
        {
            position: absolute;
            content: "";
            width: 28px;
            height: 2.5px;
            background: #fafafa;
            border-radius: 20px;
            -webkit-transition: 500ms cubic-bezier(0.77, 0, 0.175, 1);
            transition: 500ms cubic-bezier(0.77, 0, 0.175, 1);
        }
        .menu__toggler span::before 
        {
            top: -8px;
        }
        .menu__toggler span::after 
        {
            top: 8px;
        }
        .menu__toggler.active > span 
        {
            background: transparent;
        }
        .menu__toggler.active > span::before, .menu__toggler.active > span::after 
        {
            background: white;
            top: 0px;
        }
        .menu__toggler.active > span::before 
        {
            -webkit-transform: rotate(-225deg);
                transform: rotate(-225deg);
        }
        .menu__toggler.active > span::after 
        {
            -webkit-transform: rotate(225deg);
                transform: rotate(225deg);
        }
        .menu 
        {
            position: absolute;
            left: -30%;
            z-index: 998;
            color: #005c9c;
            background: rgba(250, 250, 250, 0.7);
            -webkit-clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
                    clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
            width: 30%;
            height: 100%;
            padding: 100px;
            display: -webkit-box;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                    flex-direction: column;
            -webkit-box-pack: center;
                    justify-content: center;
            -webkit-transition: 300ms left cubic-bezier(0.77, 0, 0.175, 1);
            transition: 300ms left cubic-bezier(0.77, 0, 0.175, 1);
        }
        @media only screen and (max-width: 900px) 
        {
            .menu 
            {
                width: 3250px;
                left: -3250px;
                padding: 50px;
            }
        }
        .menu.active 
        {
            left: 0;
        }
        .menu p 
        {
            font-size: 1.4rem;
            margin-bottom: 1rem;
        }
        *, *::before, *::after 
        {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body 
        {
            min-height: 100vh;
            background-color: #1d1f20;
            font-family: "K2D", sans-serif;
            display: -webkit-box;
            display: flex;
            -webkit-box-pack: center;
                    justify-content: center;
            -webkit-box-align: center;
                    align-items: center;
        }
        section 
        {
            display: none;
        }
        section:target 
        {
            display: block;
        }
      </style>
    </head>
    <body>
        <div class="menu">
            <div class="test2" id="menu">
                <ul>
                <li><a href="#default" class="test">Main menu</a></li>
                <li><a href="#test1">test1</a></li>
                <li><a href="#test2">test2</a></li>
                </ul>
            </div>
            <div class="test3">
                <ul>
                <li><a href="#default" class="test">Second menu</a></li>
                <li><a href="#test3">test3</a></li>
                <li><a href="#test4">test4</a></li>
                </ul>
            </div>
        </div>
        <div class="menu__toggler">
            <span></span>
        </div>
        <section id="test1">
            test1
        </section>
        <section id="test2">
            test2
        </section>
        <script type="text/javascript">
                const toggler = document.querySelector('.menu__toggler');
        const menu    = document.querySelector('.menu');
        toggler.addEventListener('click', () => 
        {
            toggler.classList.toggle('active');
            menu.classList.toggle('active');
        })
        </script>
    </body>
</html>

我在等待您的意见，看看我们是否可以采取措施解决这个问题:D

- Gabriel Brooks

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- EugenSunic · Accepted Answer

将另一个事件侦听器添加到捕获HTML锚点的单击事件，并使用classList remove方法隐藏菜单。

 menu.addEventListener('click', (e) => {
        if (e.target.tagName === 'A') {
          toggler.classList.remove('active');
          menu.classList.remove('active');
        }
      })

Fiddle: https://jsfiddle.net/y6adsov3/