Question

我刚刚制作了一个非常简单的切换按钮。函数检查状态（类），并执行调整动画/重新设置状态。

但是当点击时，两种情况都会被触发（目标div出现并消失）。只需点击一下，怎么会发生这种情况？

$('.box').live('click',function(){
      if ($(this).hasClass('.op'))
      {
         $(this).siblings('.lh').animate({ width: '0', marginLeft: '80'}, 300);
         $(this).removeClass('.op');
      } else
      {
         $(this).siblings('.lh').animate({ width: '80', marginLeft: '0'}, 300);
         $(this).addClass('.op');
      }
});

Answer 1

在引用类操作函数的类时，不要使用点表示法。

它应该是.addClass('op')，.removeClass('op')和.hasClass('op') - 应该为您解决。

Answer 2

box.hasClass('.op')尝试不带点。像box.hasClass('op')，但我想这不是真正的问题

$('.box').live('click',function(){

          if ($(this).hasClass('op'))
          {
             $(this).siblings('.lh').animate({ width: '0', marginLeft: '80'}, 300);
             $(this).removeClass('op');
          } else {
             $(this).siblings('.lh').animate({ width: '80', marginLeft: '0'}, 300);
             $(this).addClass('op');
          }
    });

Answer 3

我不会使用live。相反，请尝试click：

$('.box').click(function(){
          if ($(this).hasClass('.op'))
          {
             $(this).siblings('.lh').animate({ width: '0', marginLeft: '80'}, 300);
             $(this).removeClass('.op');
          } else
          {
             $(this).siblings('.lh').animate({ width: '80', marginLeft: '0'}, 300);
             $(this).addClass('.op');
          }
    });

http://api.jquery.com/click/

Jquery单击切换，如果/ else情况都被触发

3 个答案: