jQuery toggle显示隐藏的时候需要点两下的解决方法

jQuery的toggle()函数用于js方法间的切换,用toggle方法处理一些展示隐藏效果很方便.但有时会有些问题.接下来看个状况.

以下用toggle方法处理点id为div2的元素的时候显示id为div2的元素,再点击一下则隐藏的例子:
代码如下:

$('#div1').toggle(
  function()
  {
      $('#div2').show();
  },
  function()
  {
      $('#div2').hide();
  },
);

但用ajax动态加载的时候就会出现问题,显示隐藏的时候需要点两下才能触发,这时可以用另一个方法来代替,就是click,当点击的时候判断id为div2的元素是否隐藏,如果隐藏则显示,如果显示则隐藏.

代码如下:

$('#div1').live('click', function () //因为通过ajax加载后的dom,这边用live
{
 var div2 = $('#div2');
  if (div2.is(':visible')) //如果id为div2的区域显示
  {
      div2.hide(); //隐藏
  }
  else 
  {
       div2.show();
  }
});

这样达到同样的切换的效果.解决toggle()函数点击第一下为什么不起作用.