切换 JavaScript 上的动画功能不起作用答案

【问题标题】：Toggle Animation Function on JavaScript not working切换 JavaScript 上的动画功能不起作用
【发布时间】：2021-12-30 20:01:33
【问题描述】：

大家好，我正在尝试构建一个网站，其中包含一项功能，当单击汉堡图标时，它会切换侧边栏，但它似乎不起作用。我所有链接到 JavaScript 的 CSS 标签都是正确的。我只是想让你们看看我的 JavaScript 代码是否正确。


$(document).ready(function(){
 

  $('.menu-btn').click(function(){
      $('.navbar .menu').toggleClass('active');
    });

}); ```

【问题讨论】：

标签： javascript

【解决方案1】：

您可能没有定义 jQuery 引用。查看下面的示例应用程序后，您应该提交更详细的错误报告。

$(document).ready(function() {
    $("#menu-btn").click(function(e) {
        e.stopPropagation();
        e.preventDefault();
        $(this).toggleClass("active");
        $(".menu ul").toggleClass("active");
    });
});

.toggle-nav{
    margin-left: 7px;
}

.menu ul.active {
    display: none;  
}

.menu ul {
    position: absolute;
    top: 20%;
    padding: 10px 20px;
    background: #F0F0F0;
}

.menu li {
    margin: 5px 0px 5px 0px;
    float: none;
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="menu">
    <button id="menu-btn" class="toggle-nav">Toggle</button>

    <ul class="active">
        <li><a href="#">First</a></li>
        <li><a href="#">Second</a></li>
        <li><a href="#">Thirth</a></li>
    </ul> 
</div>

参考文献

jQuery: Click outside element to "close" menu that uses toggleClass to appear

【讨论】：