jquery - .toggle 正在为我的锚标记设置动画，而不是将其用作点击

Question

我知道 .toggle 可以执行两种不同的事情，如果您提供两个功能，它应该提供一个切换按钮单击和关闭，但我的代码正在使动画立即发生并且锚标记消失

html

<nav class="mainNav">
                    <ul>
                        <li class="home"><a href="#">home</a></li>
                        <li class="work"><a href="#">work</a></li>
                        <li class="blog"><a href="#">blog</a></li>
                        <li class="contact"><a href="#">contact</a></li>

                    </ul>
                    <a href="#" id="toggle">HI</a>
                </nav>

js

$(function() {
    $(".rslides").responsiveSlides({auto:true});

    $("#toggle").toggle(function(){
        $(".mainNav ul").slideDown();
    }, function(){
        $(".mainNav ul").slideUp();
    });


});

Answer 1

您的切换方法是切换#toggle，您传递给切换的函数是切换动画完成后回调的函数http://api.jquery.com/toggle/

最好使用 SlideToggle，

$('#toggle').click(function() {
  $('.mainNav ul').slideToggle('slow', function() {
    // Animation complete.
  });
});