jQuery removeClass不'；t的工作方式是正确的

有两个按钮（黑色的）和两个（开始时是小尺寸的）绿色框，其中包含（红色，但开始时未显示）内容。我的目标是使以下各项完美工作：

如果我点击第一个按钮，第一个框就会变大，它的内容就会可见。如果第二个长方体很大（且其内容可见），则在第一个长方体的功能开始之前，使第二个长方体的内容消失，然后使长方体恢复原始大小。 因此，单击第二个按钮，只需将第二个框变大

我试着做到了，但代码中没有任何逻辑错误。但是，如果我点击第一个按钮，它仍然工作良好，但在我点击第二个按钮后，一切都出错了。。。函数的作用是：添加“不可见”的类，但在该类立即删除之后。在事情变得越来越糟之后

以下是我的页面演示：

---

请帮帮我，我只是一个网络编程新手，也很抱歉我的英语不好

我看到的问题是，每次单击按钮都会绑定Transion事件

$( "div.button-1" ).click( function() {
    if( $( "div.no2 div.inside" ).hasClass( "invisible" ) != true ) {

        // FOLLOWING LINE IS RE-BOUND EACH TIME WITH ON() 
        $( "div.no2 div.inside" ).addClass( "invisible" ).on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function() {});
    });
})

在多个地方都是这样，因此多个事件处理程序被绑定到您的div（no1，no2）。解决这个问题，它可能会解决您的问题。（您可以调用

off（）

或将事件处理程序绑定到单击处理程序之外）

编辑：这里有一个更新的fiddle，它演示了如何调用

off

以防止多事件绑定（脚本也已清理）：

代码更改如下：

var TRANSITIONS = 'transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd';

$('div.button-1, div.button-2').on('click', function() {
    var ORIGINAL = $(this).hasClass('button-1') ? 'div.no1' : 'div.no2';
    var SELECTOR = ORIGINAL === 'div.no1' ? 'div.no2' : 'div.no1';

    if ($(SELECTOR).find('div.inside').hasClass('invisible') !== true) {
        $(SELECTOR).find('div.inside').addClass('invisible').on(TRANSITIONS, function() {
            $(SELECTOR).find('div.inside').off(TRANSITIONS);
            $(SELECTOR).removeClass('bigger').on(TRANSITIONS, function() {
                $(SELECTOR).off(TRANSITIONS);
                $(SELECTOR).removeClass('z-index-2');
                $(ORIGINAL).addClass('z-index-2').addClass('bigger').on(TRANSITIONS, function() {
                    $(ORIGINAL).off(TRANSITIONS);
                    $(ORIGINAL).find('div.inside').removeClass('invisible');
                });
            });
        });
    } else {
        $(ORIGINAL).addClass('z-index-2 bigger').on(TRANSITIONS, function() {
            $(ORIGINAL).off(TRANSITIONS);
            $(ORIGINAL).find('div.inside').removeClass('invisible');
        })
    }
});

---

欢迎来到堆栈溢出！请在此处添加有意义的代码和问题描述。不要只链接到需要修复的站点——否则，一旦问题解决，这个问题将对未来的访问者失去任何价值。发布一个能证明你的问题的帖子会帮助你得到更好的答案。有关更多信息，请参阅“谢谢！”！请在中构造代码以便轻松调试。这是JSFIDLE中的站点，但我不知道如何让我的js在其中工作：（要让JSFIDLE工作，您需要包含jQuery（右上角）。这里有一个包含jQuery的链接：感谢您的回答@JackPattishall，正如我看到的，我不知道如何“打开”有效…您的解决方案非常完美，谢谢！：）