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

Question

我遇到了仅运行动画的打开/关闭功能的问题。

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

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

---

直到第二个滑块旋转时才会出现此问题。这就是你必须在小提琴中做的事情才能让错误显示出来。

1. 打开小提琴，
2. 点击“打开面板”
3. 关闭面板，
4. 导航到下一张幻灯片
5. 重复上述相同步骤（但在其中一张幻灯片上，让面板保持打开状态并导航到下一侧）
6. 您会注意到，当您返回第一张幻灯片时，如果您尝试打开面板，它将打开，然后立即再次关闭。
7. 如果您再次重复这些步骤，您会注意到面板开始打开、关闭，然后再次打开……啊啊啊好奇怪！！！

---

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

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

        });

    }

});
​

---

---

如果有人可以帮助我了解我哪里出错了，我将不胜感激。

提前致谢。

Answer 1

只需在 bxslider onAfterSlide 回调中绑定单击事件时使用 off 取消绑定

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

            e.preventDefault();
            panelAction();

        });

但是您的代码在 chrome 上对我来说充满了错误。

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

见http://jsfiddle.net/X34XJ/8/