时间戳

首页 > 解决方案 > .toggleClass 在函数内部不起作用

javascript - .toggleClass 在函数内部不起作用

问题描述

当我把$("header nav ul").toggleClass("open")它放在点击功能之外时，它可以工作，但当我把它放在里面时它就不行了。这是为什么？？

警报方法正在运行，因此单击 a 标记有效。

    <header>
        <div class="wrapper">
            <h1 class="logo">Blesto</h1>
            <nav>
                <a href="" class="burger-nav"></a>
                <h2>Main Navigation</h2>
                <ul class="burger-nav-ul">
                    <li><a href="">Our Story</a></li>
                    <li><a href="">Menu</a></li>
                    <li><a href="">Reservations</a></li>
                    <li><a href="">News</a></li>
                    <li><a href="">Reviews</a></li>
                </ul>
            </nav>
        </div>
    </header>

$(document).ready(function(){
    $(".burger-nav").click(function(){
        alert("hi");
        $("header nav ul").toggleClass("open");
    });
});

标签： javascriptjquery

解决方案

您需要停止锚元素的默认行为。

$(".burger-nav").click(function(event){
    event.preventDefault();
    alert("hi");
    $("header nav ul").toggleClass("open");
});

运行是正确alert的，但是默认行为是运行，它将指向任何href指向的地方。在这种情况下，相同的页面。

推荐阅读