当前位置: 动力学知识库 > 问答 > 编程问答 >

Jquery click toggle, if/else cases both triggered

问题描述:

I've just made a really simple toggle button. Function checks the state (a class), and executes resizing animation/re-sets state.

But when clicked, somehow both cases are triggered (target div appears and disappears). How can this happen with just one click?

$('.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');

}

});

网友答案:

You don't use dot notation when referring to classes for the class manipulation functions.

It should be .addClass('op'), .removeClass('op') and .hasClass('op') - that should fix it for you.

网友答案:

box.hasClass('.op') try without dot. like box.hasClass('op') but I guess this is not the real problem

$('.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');
          }
    });
网友答案:

I wouldn't use live. Instead, try 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/

分享给朋友:
您可能感兴趣的文章:
随机阅读: