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是here

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

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

小提琴：https://jsfiddle.net/hc8cad7c/2/

Answer 2

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

并且可选地，注释返回false;，我对此行有问题，因为有时切换不起作用。

Answer 3

更新委托功能更改它：

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

为此：

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

在ajax上工作得更好。

Answer 4

有时，如果多次调用jQuery操作，它们会运行两次。之所以会发生这种情况，是因为执行队列中有一些待处理的操作会干扰操作流程。

所以我建议在click方法的开头使用clearQueue（）方法，这样可以保证在开始执行逻辑之前清除所有未完成的操作。

这里是clearQueue（）方法https://api.jquery.com/clearQueue/

的文档

Answer 5

e.stopImmediatePropagation();

这将解决您的问题。

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

5 个答案: