Question

我已经尝试了各种方法来做这件事，但我似乎无法阻止按钮列表添加类＆＃34; inview＆＃34;动画正在进行中。

我有一个向上滑动然后向下滑动的菜单。

在向下动画中，如果我在恰当的时间单击另一个按钮，我将有两个元素与类＃34; inview＆＃34;。

应该只有on class in class。

＆＃34;正确的时间＆＃34;我会点击一次，尝试不同的按钮，然后在向下动画完成之前按另一个按钮。

这给我留下了两个带有显示块的元素（类＆＃34; inview＆＃34;），而不是一个。

我有created a fiddle证明问题所以你可以自己重新创建它。

但这是违规行为：

function menu_actions() {
    // get class defined with menu_classes function
    var getClass = $(this).attr('class').split(' ')[1];
    //
    if ($('div', '.details').hasClass('inview') && $(this).hasClass('click')) {
        console.log('inview and click');
        $('.btn', '#feature-nav').off('click', menu_actions);
        // bleach .details classes 
        $('.inview', '.details').fadeOut('slow', function () {
            $(this).removeClass('inview');
        });
        // animation
        details.slideUp('slow');
        dropmenu.slideUp('medium');
        setTimeout(function () {
            // move content body up
            mainBody.addClass('moveBody');
            $('.btn', '#feature-nav').on('click', menu_actions);
        }, 100);
    } else if (!$('div', '.details').hasClass('inview') && $(this).hasClass('click')) {
        console.log('not inview but click');
        $('.btn', '#feature-nav').off('click', menu_actions);
        // move content body back down
        mainBody.removeClass('moveBody');
        // give specific element class
        // give this one some "pop"
        $('.' + getClass, '.details').fadeIn('slow', function () {
            $(this).addClass('inview');
        });
        // animate
        details.slideDown('slow');
        dropmenu.slideDown('medium', function () {
            $('.btn', '#feature-nav').on('click', menu_actions);
        });
    } else if ($('div', '.details').hasClass('inview') && !$(this).hasClass('click')) {
        console.log('inview but not click');
        $('.btn', '#feature-nav').off('click', menu_actions);
        // bleach all classes, add class to specific button
        // give this one some "pop"
        $('.inview', '.details').fadeOut('slow', function () {
            $('.inview', '.details').removeClass('inview');
        });
        $('.btn', '#feature-nav').removeClass('click');
        $(this).addClass('click');
        // animate
        details.slideUp('slow');
        dropmenu.slideUp('medium');
        //
        setTimeout(function () {
            mainBody.addClass('moveBody');
        }, 100);
        // timed animation for smoother transitions
        setTimeout(function () {
            // move content body back down
            mainBody.removeClass('moveBody');
            // give this one some "pop"
            $('.' + getClass, '.details').fadeIn('slow', function () {
                $(this).addClass('inview');
            });
            //
            details.slideDown('slow');
            dropmenu.slideDown('medium', function () {
                $('.btn', '#feature-nav').on('click', menu_actions);
            });
        }, 900);
    } else if (!$('div', '.details').hasClass('inview') && !$(this).hasClass('click')) {
        console.log('not inview and not click');
        $('.btn', '#feature-nav').off('click', menu_actions);
        // bleach all classes, add class to specific button AND .details
        $('.btn', '#feature-nav').removeClass('click');
        $('.inview', '.details').removeClass('inview');
        $(this).addClass('click');
        // move content body up
        mainBody.removeClass('moveBody');
        // give specific element class
        // give this one some "pop"
        $('.' + getClass, '.details').fadeIn('slow', function () {
            $(this).addClass('inview');
        });
        // animate 
        details.slideDown('slow');
        dropmenu.slideDown('medium', function () {
            $('.btn', '#feature-nav').on('click', menu_actions);
        });
    }
} // end of menu actions

我目前的方法是使用on()/off() jquery函数来尝试和禁用按钮。

我应该澄清一下，当满足这个条件时，这个问题只出现在向下动画上：

 } else if ($('div', '.details').hasClass('inview') && !$(this).hasClass('click')) {

或简化为条件＆＃34;菜单是＆＃39; inview＆＃39;但按钮没有课程＆＃39;点击＆＃39;＆＃34;。

请尝试jsfiddle，但它有点难以复制。

我想在动画时禁用按钮列表上的点击事件

0 个答案: