Question

所以我有一个网页，您可以在其中选择文本框并通过再次单击背景或框来关闭它们：

所以我有一些代码会根据点击的内容添加或删除类：

$('li').click(function(){
    _this = $(this)
    if (_this.hasClass('active')) {
        //Close it if you clicked on that's already open
        _this.removeClass('active')
    } else if ($('li.active').length !== 0) {
        //close one and open another one you clicked
        _this.siblings().removeClass('active')
        _this.siblings().bind('webkitTransitionEnd oTransitionEnd transitionend',function(){
            _this.addClass('active');
        });
    } else {
        //open the first one
        _this.addClass('active');
    }

});

//Close when clicking the background
$('#close').click(function(){
    $('.active').removeClass('active')
});

问题：当您打开一个框并再次单击它时，它应该自行关闭，就像第一个if语句所说的那样。但是如果你在文本框之间切换3次（使用秒if语句），并尝试关闭第三个文本框，它只是一遍又一遍地重新打开。关于它为什么会这样做的任何线索？

谢谢！

Answer 1

弄清楚了......

即使您使用不同的if语句，转换事件处理程序也不会取消绑定。做了一点阅读，按照jQuery的创建者的建议将.bind（）和.unbind（）移动到.on（）和.off（），并将off语句添加到on语句函数的末尾。

以下是代码：

$('li').click(function(){
    _this = $(this)
    if (_this.hasClass('active')) {
        //Close it if you clicked on that's already open
        _this.removeClass('active')
    } else if ($('li.active').length !== 0) {
        //close one and open another one you clicked
        _this.siblings().removeClass('active')
        _this.siblings().on('webkitTransitionEnd oTransitionEnd transitionend',function(){
            _this.addClass('active');
            _this.siblings().off('webkitTransitionEnd oTransitionEnd transitionend');
        });
    } else {
        //open the first one
        _this.addClass('active');
    }

});

//Close when clicking the background
$('#close').click(function(){
    $('.active').removeClass('active')
});

在添加之前，使用jQuery从元素中删除类

1 个答案: