单击离开时如何删除导航栏的“活动” class？

Question

I am kinda new to this.我对此有点陌生。 I made a navbar that contains a button which toggles an 'active' class when clicked.我制作了一个导航栏，其中包含一个按钮，单击该按钮可切换“活动”class。 I want to make it so when the navbar is opened and I click away it removes the 'active' class.我想这样做，所以当导航栏打开并单击它时，它会删除“活动”class。 Although I used an eventListener (I don't know anything about those, so I Googled)虽然我使用了一个 eventListener（我对这些一无所知，所以我用谷歌搜索）

function toggle() {
    var navButton = document.querySelector('.nav-btn-container');
    navButton.classList.toggle('active')
}

var navBar = document.querySelector('#nav-bar');
navBar.addEventListener('click', function(event){
    var isClickInside = navBar.contains(event.target);
    if (isClickInside && 
        document.querySelector('.nav-btn-container').classList.contains('active')){
        document.querySelector('.nav-btn-container').classList.remove('active');
    }
});

In VS Code I don't get any errors, but in the Chrome debugger I get this:在 VS Code 中我没有收到任何错误，但在 Chrome 调试器中我得到了这个：

Uncaught TypeError: Cannot read property 'addEventListener' of null

In the event function I used document.querySelector('.nav-btn- container') instead of navBar because if I move the navBar declaration outside of the toggle() class (on the first line) I get another error when I click the button:在事件 function 中，我使用 document.querySelector('.nav-btn-container') 而不是 navBar，因为如果我将 navBar 声明移到 toggle() class 之外（在第一行），当我单击按钮：

Uncaught ReferenceError: navButton is not defined

HTML: HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="script.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>FCC: Product Landing Page</title>
</head>

<body>
    <header id="header">
        <img src="logo.png" alt="Logo" id="header-img">
        <button class="nav-btn-container" onclick="toggle()">
            <span class="nav-btn"></span>
        </button>
        <nav id="nav-bar">
             <ul class="nav-list">
                 <li class="nav-item"><a href="#features" class="nav- 
link">Features</a></li>
                 <li class="nav-item"><a href="#video" class="nav- 
link">Unboxing</a></li>
                 <li class="nav-item"><a href="#purchase" class="nav- 
link">Purchase</a></li>
                 <li class="nav-item"><a href="#reviews" class="nav- 
link">Reviews</a></li>
            </ul>
        </nav>
    </header>

    <main> 
        <section class="hero">
            <div class="container">
                <h1>Hover over the world</h1>
                <h2>Reach fast speeds</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
            </div>
        </section>

        <section class="features">
            <div class="container">
                <h1>Hover over the world</h1>
                <h2>Reach fast speeds</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
            </div>
        </section>

        <section class="video">
            <div class="container"></div>
</section>

        <section class="purchase">
            <div class="container"></div>
        </section>

        <section class="reviews">
            <div class="container"></div>
        </section>
    </main>
    <footer>

    </footer>

</body>
</html>

CSS: https://pastebin.com/Zd7DFCca CSS: https://pastebin.com/Zd7DFCca

Answer 1

in the head tag insert this jquery reference script在head标签中插入这个 jquery 参考脚本

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
.
.
.
</head>

what needs to be done is to add a mouse click event , on click the code should check if the click was outside the nav container, if true, active will be removed from it:需要做的是添加鼠标点击event ，点击代码应该检查点击是否在nav容器之外，如果为真， active将从中移除：

in your js script file replace the js code that you posted by this:在您的js脚本文件中替换您发布的js代码：

function toggle() {
    var navButton = document.querySelector('.nav-btn-container');
    navButton.classList.toggle('active')
}

$(document).mouseup(function (e) {
    var container = $("header");
    // if the target of the click isn't the container nor a descendant of the container
    if (!container.is(e.target) && container.has(e.target).length === 0) {
        document.querySelector('.nav-btn-container').classList.remove('active');

    }
});

Moreover instead of placing your <script src="script.js"></script> in the head , you should place in the bottom of the body此外，不要将<script src="script.js"></script>放在head中，而应该放在body的底部

单击离开时如何删除导航栏的“活动” class？

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-04-12 19:33:35

单击离开时如何删除导航栏的“活动” class？

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-04-12 19:33:35

解决方案1
0 已采纳 2020-04-12 19:33:35