jQuery slideToggle - 加载两次（打开 - 然后关闭）

Question

我已经建立了一个移动端导航网站，使用jQuery实现slideToggle效果。但是我增加了一些检查，以判断用户是否打开了搜索栏/通知栏，然后显示或隐藏它们，确保在任何时候只有一个项目可见。

我的jQuery代码如下（我也提供了一个Fiddle）：

$(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();
    })


})

我遇到的问题是，切换按钮第一次可以正常工作，但当你点击搜索链接后，会加载导航。然后slideToggle尝试两次执行动画（打开和关闭）。

这里有一个jsFiddle：链接

为什么会出现这种情况？我只能假设我的逻辑有误。

- StuBlackett

---

$('.mobile-search-form:visible') 总是为真值，您需要检查 $('.mobile-search-form:visible').length 属性。 - Satpal

或者 $('.mobile-search-form').is(':visible') 或者 $('.mobile-search-form').css('display') == 'block' :) （注：这是一段代码，意思是如果“mobile-search-form”元素可见或显示状态为块状，则执行某些操作。） - Akairis

谢谢。仍然不幸地做着同样的事情。切换似乎在你关闭搜索并重新打开导航的路线后会触发两次。 - StuBlackett

你能更好地解释一下我应该点击哪里吗？我先点击搜索，然后是导航，再点搜索，所有的都看起来很好... :/ - sandrina-p

Answer 1

我使用.stop()修改了JS的第39行，现在它可以正常工作（我认为这就是你想要的行为）：

$(this).next('ul.sub-nav').stop().slideToggle();

https://jsfiddle.net/hc8cad7c/1/

好的，这是第二次尝试，我删除了 slideToggle() 并使用 slideUp() 和 slideDown() 函数代替，一开始看起来似乎可以工作，但是经过几次点击后，我认为它还没有完全解决...

这是我更改的行：

function accordion_links()
{
    $('.chevron-down').click(function()
    {
        if($(this).parent('li').hasClass('open'))
        {
            $(this).removeClass('chevron-up');
            $(this).addClass('chevron-down');
            $(this).parent('li').removeClass('open');
    $(this).next('ul.sub-nav').slideUp();
        }
        else
        {
            $(this).removeClass('chevron-down');
            $(this).addClass('chevron-up');
            $(this).parent('li').addClass('open');
    $(this).next('ul.sub-nav').slideDown();
        }
    })
}

And the fiddle: https://jsfiddle.net/hc8cad7c/2/

- jeremykenedy

---

嗨，谢谢您的回答。我遇到的问题似乎是当您单击搜索链接，然后重新切换导航时，子导航似乎无法正确地滑动切换 :/ - StuBlackett

Answer 2

e.stopImmediatePropagation();

这将解决您的问题。

- Maahi Bhat

---

你真是救命恩人！谢谢你！这解决了我所有的问题。 - Krzysztof Delestowicz

Answer 3

尝试在else条件下使用slideToggle，因为您只有if条件而没有else，它总是尝试执行动画。

另外，可以注释掉“return false;”，我曾经遇到过这一行的问题，因为有时候切换无法正常工作。

- Aimeé RP

---

我最近遇到了这个问题，就像你发布的那样，使用return false;的解决方案立即为我解决了问题！谢谢！ - Gosi

Answer 4

有时候，如果调用多次jQuery操作，它们会运行两次。这是因为执行队列中有一些未完成的操作干扰了操作流程。

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

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

- Doaa Magdy

Answer 5

更新委派函数并更改它：

$('.chevron-down').click(function()

对于这个：

$(document).on("click",'.chevron-down', function()

更适合使用ajax进行工作。

- user6079755