Jquery 单击按钮添加和删除css类

我用这段代码在我的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的相同代码用于将所有元素返回到其正常位置不工作。

您需要事件委派。使用

.on（）

：

您可以在此处使用并缩短代码：

---

试试这个：

$(document).ready(function(){

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

或

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

---

使用

.toggleClass（）

尝试事件委派，尽可能缩短：

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

---

您可以用最接近的静态父级ID/类名替换点击事件中的

$（文档）

。

您能提供fiddler代码吗？您的HTML是什么样的？

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

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