jquery - 我在使用 jquery 为导航的高度设置动画时遇到问题 - 它让我点击了两次按钮

Question

我有一个高度设置为 0px 的导航。当我单击一个元素（此处为#menu_button）时，导航的高度应该更改为给定的高度（此处为 143px）。这会切换它。我的问题是我第一次点击按钮两次才能正常工作。请帮忙。顺便说一句，我是新来的。

这是代码：

<nav>
    <ul>
        <a href="#port"><li><p>Portfolio</p></li></a>
        <a href="#about"><li><p>About Me</p></li></a>
        <a href="#contact"><li><p>Contact Me</p></li></a>
    </ul>
</nav>
<div id="container_menu_button">
    <div id="menu_button">
        <div id="menu_pic"></div>
    </div>
</div>

（导航的CSS）

nav {
    height:0px;
    overflow:hidden;
}

（jQuery）

<script>    
$("#menu_button").click( function(event){
    event.preventDefault();
    if ($(this).hasClass("isDown") ) {
        $("nav").animate({height:"143px"}, 200);          
        $(this).removeClass("isDown");
    } else {
        $("nav").animate({height:"0px"}, 200);   
        $(this).addClass("isDown");
    }
    return false;
});
</script>    

Answer 1

您需要单击它两次，因为您的 menu_button div 没有“isDown”类开始。第一次单击它时，它会将其设置为 0px（它已经是）并添加类。然后，第二次单击它会按预期工作。

做这个：

<div id="menu_button" class="isDown">