0

高さが 0px に設定されているナビゲーションがあります。要素 (ここでは #menu_button) をクリックすると、ナビゲーションの高さが特定の高さ (ここでは 143px) に変更されるはずです。これはそれを切り替えます。私の問題は、ボタンが正しく機能する前に、最初にボタンを 2 回クリックする必要があることです。助けてください。ところで、私はここで新しいです。

コードは次のとおりです。

<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>
4

1 に答える 1

0

menu_button div には最初から「isDown」クラスがないため、2 回クリックする必要があります。初めてクリックすると、アニメーションが 0px (既にある) になり、クラスが追加されます。次に、2 回目にクリックすると、期待どおりに機能します。

これを行う：

<div id="menu_button" class="isDown">
于 2013-08-10T17:49:32.887 に答える