滑块中的jQuery打开/关闭功能-第一次工作，但是第二次，运行打开然后关闭 [英] jquery open/close function within slider - works first time, but second time, runs the open, then closes it

问题描述

我在简单地运行动画的打开/关闭功能上遇到了问题.

I am having problem with a open/close function which simply runs an animation.

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

See my fiddle here http://jsfiddle.net/motocomdigital/X34XJ/7/

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

It is playing up because I am running this function inside an slider animation. Using bx-slider.

直到滑块第二次旋转才出现该问题.这是您在小提琴中必须执行的操作才能显示该错误.

The problem does not occur until the second slider rotation. This is what you have to do in the fiddle to get the bug to show.

1. 打开小提琴，
2. 点击打开面板"
3. 关闭面板，
4. 导航到下一张幻灯片
5. 重复以上相同的步骤(但在一张幻灯片上，使面板保持打开状态并导航到下一页)
6. 您会发现回到幻灯片第一页时，如果尝试打开面板，它将打开，然后立即再次关闭.
7. 如果再次重复这些步骤，您会注意到面板开始打开，关闭，然后再次打开... aaaahh很奇怪！！！

---

这是我的代码(尽管查看小提琴会更好)

---

This is my code (though viewing it the fiddle will be better)

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

        });

    }

});
​

---

---

如果有人可以帮助我了解我要去哪里出问题，我将非常感激.

If anyone could help me understand where I'm going wrong, I would be so grateful.

谢谢.

推荐答案

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

Just unbind using off as you are binding click event in bxslider onAfterSlide callback

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

            e.preventDefault();
            panelAction();

        });

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

But your code is full of bugs for me on chrome.

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

Note that you shouldn't bind events in bxslider onAfterSlide callback functions.

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

这篇关于滑块中的jQuery打开/关闭功能-第一次工作，但是第二次，运行打开然后关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！