JQuery 每点击 2 次就会淡入

Question

我正在尝试创建一个 Burgermenu，一个没有任何动画的简单下拉菜单。

在此之后，我尝试使用以下脚本让这个下拉菜单在点击时淡入：

<script>
$('span.nav-button').click(function(){
console.log("information: click!");
$(".burgermenu").fadeIn(500);
});
</script>

因此我无法再关闭菜单，菜单现在每次都尝试淡入。

谁能告诉我如何让这个 class 仅在我第二次单击菜单时淡化？

Answer 1

使用 .toggle() 方法：

$('span.nav-button').click(function(){
    $(".burgermenu").toggle();
});

只需使用切换方法

Answer 2

<script>
    $('span.nav-button').click(function (){
        $('ul.burgermenu').toggle(500);$
    })
    $(window).resize(function () {
        if ( $(window).width() > 400 ) {
            $('ul.burgermenu').removeAttr('style');
        }
    })
</script>

大声笑我已经在上面切换了，所以我只是添加了毫秒 xD -

非常感谢你！ =D

JQuery 每点击 2 次就会淡入

JQuery FadeIn with every 2nd click

javascript

jquery

html

css

transition

使用 .toggle() 方法：