jquery - 单击按钮时添加和删除 css 类

Question

我使用此代码在我的 html 页面中显示和隐藏侧边栏

$(document).ready(function(){

       $('button.rside').click(function(){
               $( "#all-labels" ).removeClass( "side-click" );
               $( ".box" ).removeClass( "box-side" );
               $(this).removeClass( "rside" );
               $(this).addClass( "side" );
          });
       $('button.side').click(function(){
               $( "#all-labels" ).addClass( "side-click" );
               $( ".box" ).addClass( "box-side" );
                $(this).addClass( "rside" );
                $(this).removeClass( "side" );
          });
     });

当我单击按钮时，此代码运行良好，添加新类并将按钮类侧与 rside 重新匹配，按钮为新按钮类 rside 执行相同的代码，用于将所有元素返回到正常位置，但无法正常工作。

Answer 1

您需要事件委托(delegate)。使用.on():

 $(document).on('click','button.rside',function(){
           $( "#all-labels" ).removeClass( "side-click" );
           $( ".box" ).removeClass( "box-side" );
           $(this).removeClass( "rside" );
           $(this).addClass( "side" );
      });
 $(document).on('click','button.side',function(){ 
           $( "#all-labels" ).addClass( "side-click" );
           $( ".box" ).addClass( "box-side" );
            $(this).addClass( "rside" );
            $(this).removeClass( "side" );
      });