jQuery slideToggle - 加载两次(打开 - 然后关闭)

Question

我已经建立了一个带有移动导航的网站,

我正在使用jQuery做一个slideToggle,但是我有一些检查,看看用户是否打开了搜索栏/通知栏,然后显示隐藏,这样你只能在给定时间看到其中一个项目.

我的jQuery代码如下(我还将提供一个小提琴)

$(document).ready(function()
{
    // Mobile Nav Toggle...
    $('.nav-toggle').click(function()
    {
        // // Check If Other Items Are Open....
        if($('.mobile-search-form:visible'))
        {
            $('.mobile-search-form').hide();
        }
        // // Check If Other Items Are Open....
        if($('.mobile-notifications:visible'))
        {
            $('.mobile-notifications').hide();
        }

        $('nav').slideToggle();

        accordion_links();

        return false;
    })

    // Add a Chevron Class To Links (For Mobile Nav)...
    $(function() {
        $('nav ul li a').each(function()
        {
            if ( $(this).parent('li').children('ul').size() > 0 )
            {
                $(this).addClass('chevron-down');
            }
        });
    });

    function accordion_links()
    {
        $('.chevron-down').click(function()
        {
            $(this).next('ul.sub-nav').slideToggle();

            if($(this).parent('li').hasClass('open'))
            {
                $(this).removeClass('chevron-up');
                $(this).addClass('chevron-down');
                $(this).parent('li').removeClass('open');
            }
            else
            {
                $(this).removeClass('chevron-down');
                $(this).addClass('chevron-up');
                $(this).parent('li').addClass('open');
            }
        })
    }

    // Toggle Search Form (On Mobile)....
    $('.search-link').click(function()
    {

        // Check If Notifications / Search Form Are Visible...
         if($('nav:visible'))
         {
                $('nav').slideUp();
         }

         if($('.mobile-notifications:visible'))
         {
            $('.mobile-notifications').hide();
         }

        $('.mobile-search-form').slideToggle();

        return false;
    })

    // Toggle Notifications On Mobile...
    $('a.notifications').click(function()
    {
        // Check If Notifications / Search Form Are Visible...
         if($('nav:visible'))
         {
            $('nav').hide();
         }

         if($('.mobile-search-form:visible'))
         {
            $('.mobile-search-form').hide();
         }

        $('.mobile-notifications').slideToggle();

        return false;
    })

    // Close Notification Block
    $('.close-notification').click(function()
    {
        $('.notification').fadeOut();
    })


})

我遇到的问题,切换是第一次工作,但是当你点击说搜索链接时,然后加载导航.skideToggle尝试两次动画(打开然后关闭)

这里有一个jsFiddle

为什么要这样做？我只能假设我的逻辑是错误的.

Answer 1

有时，如果 jQuery 操作被调用多次，则会运行两次。发生这种情况是因为执行队列中存在一些待处理的操作，这些操作会干扰操作流。

因此，我建议在单击方法的开头使用clearQueue()方法，这将保证在开始执行逻辑之前清除所有未完成的操作。

这是clearQueue()方法的文档https://api.jquery.com/clearQueue/