Question

我遇到一个只能运行动画的打开/关闭功能的问题。

在这里查看我的小提琴http://jsfiddle.net/motocomdigital/X34XJ/7/

正在播放，因为我在滑块动画中运行此功能。使用bx-slider。

直到第二个滑块旋转才会出现此问题。这就是你必须要做的事情才能让bug显示出来。

打开小提琴，
点击“打开面板”
关闭面板，
导航到下一张幻灯片
重复上述相同的步骤（但在其中一张幻灯片上，让面板保持打开并导航到下一侧）
当你回到滑动时，你会注意到，如果你试图打开面板，它会打开，然后立即再次关闭。
如果你再次重复这些步骤，你会注意到面板开始打开，关闭，然后再打开...... aaaahh很奇怪!!!!

这是我的代码（虽然查看它的小提琴会更好）

$('#slider1').bxSlider({

    auto: false,
    speed: 800,

    // runs after new slide has loaded
    onAfterSlide: function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {

        var $fadeItems = $('a.openPanel, .panel, span'), // items that fade in
            $panel = $(currentSlideHtmlObject).find('.panel'); // current slide panel

        $fadeItems.removeAttr('style'); // this removes the inline style on all fadeItems, allowing css display: none; to take affect

        $(currentSlideHtmlObject).find($fadeItems).fadeIn(); // current slide fadeIn items fade in

        panelOpen = false; // panel state closed

        panelAction = function() { // panel slide function

            if (panelOpen === true) {

                panelOpen = false;

                $panel.animate({

                    left: '-300px'

                });

            } else {

                panelOpen = true;

                $panel.animate({

                    left: '0px'

                });

            }

        };


        // panel slide open/close button
        $(currentSlideHtmlObject).find('a.openPanel').on('click', function(e) {

            e.preventDefault();
            panelAction();

        });

    }

});

enter image description here

如果有人能帮我理解我哪里出错了，我会非常感激。

提前致谢。

Answer 1

在bxslider onAfterSlide回调中绑定点击事件时，只需解除绑定

$(currentSlideHtmlObject).find('a.openPanel').off('click').on('click', function(e) {

            e.preventDefault();
            panelAction();

        });

但你的代码在chrome上充满了我的错误。

请注意，您不应在bxslider onAfterSlide回调函数中绑定事件。

请参阅http://jsfiddle.net/X34XJ/8/

滑块内的jquery打开/关闭功能 - 第一次运行，但第二次运行打开，然后关闭它

1 个答案: