首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >实现切换菜单为移动,但整个导航栏是可点击的,我想只是按钮被点击

实现切换菜单为移动,但整个导航栏是可点击的,我想只是按钮被点击
EN

Stack Overflow用户
提问于 2019-07-10 18:53:19
回答 1查看 50关注 0票数 1

好吧,我正在尝试在没有任何框架的情况下实现响应式导航。到目前为止,我让它工作了,在点击时显示链接和隐藏它们,但我注意到它不仅仅在实际按钮被点击时切换,而是在导航栏的整个区域切换。

我不确定是在JS中还是在HTML中搞砸了什么。还是在学习事物的开始,不要评判我:D

演示:https://sweetdandelions.github.io/Liberto-photography/

HTML:

代码语言:javascript
运行
复制
  <nav>
        <div class="burger">
            <i class="fas fa-bars" aria-hidden="true"></i>
        </div>
        <ul class="nav-links tabs">
            <li id="tab-1" class="tab-item selected">Portraits</li>
            <li id="tab-2" class="tab-item ">Weddings</li>
            <li id="tab-3" class="tab-item ">Animals</li>
            <li id="tab-4" class="tab-item ">Landscape</li>
            <li id="tab-5" class="tab-item ">Blog</li>
            <li id="tab-6" class="tab-item ">About</li>
            <li id="tab-7" class="tab-item ">Price List</li>
            <li id="tab-8" class="tab-item ">Contact</li>
        </ul>
    </nav>

CSS (在媒体查询内,显示.burger :在其外无)

代码语言:javascript
运行
复制
    .burger {
            display: block;
        }

        .nav-links {
            display: none;
        }

        .nav-links li {
            text-align: center;
            padding: 5px;
            font-size: 20px;
            display: none;
        }

        .active {
            display: block;
        }

JS:

代码语言:javascript
运行
复制
    // Mobile menu nav
    const nav = () => {
        // Get the menu button
        const menu = document.querySelector('.burger');

        // Get the nav ul content
        const nav = document.querySelector('.nav-links');

        // Get all the links from the ul
        const links = document.querySelectorAll('.nav-links li');

        // Get button to be changed on click - Ignore this for now
        const icon = document.querySelector('.fa-bars');

        // When menu button clicked
        menu.addEventListener('click', () => {

            // Display the content in the nav ul
            nav.classList.toggle('active');

            console.log(nav);

            // Show links
            links.forEach((link) => {
                link.style.display = 'block';
            });

        });

        console.log(menu);

        // After link is clicked, close menu
        tabItems.forEach(item => item.addEventListener('click', () => {
            nav.classList.remove('active');
        }));
    }

    // Call function
    nav();
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-07-10 19:07:46

menu.addEventListener('click' ...更改为icon.addEventListener('click' ...

您告诉js监听menu元素上的clicks事件,即您的<div class="burger">,而不是<i class="fas fa-bars" aria-hidden="true"></i>

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56969161

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档