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

【问题标题】：How to remove 'active' class of nav-bar when clicked away?单击离开时如何删除“活动”类的导航栏？
【发布时间】：2020-07-25 06:52:22
【问题描述】：

我对此有点陌生。我制作了一个导航栏，其中包含一个按钮，单击该按钮可切换“活动”类。我想这样做，所以当导航栏打开并单击它时，它会删除“活动”类。虽然我使用了一个 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');
    }
});

在 VS Code 中我没有收到任何错误，但在 Chrome 调试器中我得到了这个：

Uncaught TypeError: Cannot read property 'addEventListener' of null

在事件函数中我使用了 document.querySelector('.nav-btn- container') 而不是 navBar，因为如果我将 navBar 声明移到 toggle() 类之外（在第一行），单击按钮时会出现另一个错误：

Uncaught ReferenceError: navButton is not defined

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

【问题讨论】：

你确定你的 dom 中有一个 id="nav-bar" 的元素吗？ + 你把你的脚本放在哪里，你确定它可以访问 DOM 吗？
该错误是因为没有正确选择 DOM 元素。可能问题不在于您的 JavaScript，而在于您的 HTML。你也可以添加你的 HTML 代码吗
是的，我在发布问题之前检查了它有一个
在此处发布您的 HTML。
完成。我编辑了帖子

标签： javascript html css

【解决方案1】：

在head 标记中插入此jquery 参考脚本

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

需要做的是添加鼠标点击event，点击代码应该检查点击是否在nav容器之外，如果是，active将被移除：

在您的 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');

    }
});

此外，不要将<script src="script.js"></script> 放在head 中，而应放在body 的底部

【讨论】：

对不起，我不明白你的意思。
我的意思是我不明白“登录导航栏后的现在”
我将结果显示为证明。查询选择器现在返回导航栏而不是返回 null，这是导致您得到 null 引用错误的原因。
好的，我没有再收到任何错误，但仍然没有删除“活动”类
能否发布你的css，或者第三方css和js库的URL，如果你正在使用它们