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

Question

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

http://hashtag.ly/#NASCAR

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

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