Question

如果使用toggleClass

已经存在的类，如何删除它

$('.mobile_billing').toggleClass('open');

我有一个场景，我们使用上面的代码来扩展和折叠手风琴。折叠和展开有两种选择：

来自手风琴箭头
来自Check BOX。

当用户点击Check Box并且Accordion已经展开时无需任何操作。如果Accordion处于Collpase状态，想打开它。

我尝试了上面的代码，它打开或关闭。它不会检查是否已打开。有人可以帮忙吗

Answer 1

你需要为复选框和手风琴

写两个单独的事件

假设复选框id=checkbox

$("#checkbox").click(function(){      
   if(!$('.mobile_billing').hasClass('open')) // it checks if mobile_billing is not open
     $('.mobile_billing').addClass('open');
});

和假设手风琴有id=accordian

 $("#accordian").click(function(){

         $('.mobile_billing').addClass('open');
 });

Answer 2

当click on the checkbox检查手风琴是否打开时，如果return处于打开状态function。否则切换动作。

$('#checkboxId').on('click',function(){
  if($('.mobile_billing').hasClass('open')) return;

  $('.mobile_billing').toggleClass('open');
})

Answer 3

你可以这样做：

$( '.accordion_checkbox' ).click( function() { 
  $( '.mobile_billing' ).toggleClass( 'open', this.checked );
});

因此，只有在选中复选框时才会添加“打开”，并在用户取消选中时将其删除。当用户点击复选框时，它是否已经打开是无关紧要的;它会保持开放。这是使用jQuery.toggleClass's switch option并检查您将点击事件附加到的复选框的checked (boolean) value。

如果已经存在，则使用toggleClass删除一个类

3 个答案: