jQuery:将.toggle添加到< a>使它消失 [英] Jquery: Adding .toggle to <a> makes it disappear

问题描述

我有

<a id="autoUpdate">Auto-Update: ON</a>

和

$('#autoUpdate').toggle(function(){
alert('a');
}, function(){
alert('b');
})

页面加载时，显示完整的<a> -Tag:无，并且警告'b'！ 我应该补充一点，如果这很重要，并且该链接位于顶部导航中，那么这是使用Twitter Bootstrap处于开发阶段的网站. 顺便说一句，如果我将a-tag更改为<p> f.e.一切似乎都很好.

解决方案

您正在使用不推荐使用的.toggle函数.在jQuery> = 1.9.0中已将其删除，因此，如果您使用的是该版本，则此代码将改为调用.toggle动画函数，其中第二个函数是回调(在这种情况下将立即执行).

相反，您应该自己实现此类功能:

var toggleState = true;
$('#autoUpdate').on("click", function() {
  if(toggleState) {
    alert('a');
  } else {
    alert('b');
  }
  toggleState = !toggleState;
});

I have

<a id="autoUpdate">Auto-Update: ON</a>

and

$('#autoUpdate').toggle(function(){
alert('a');
}, function(){
alert('b');
})

When the page loads, the complete <a>-Tag gets display:none and 'b' is alerted! I should add that this is site in developing stage using Twitter Bootstrap if that matters and the link is in the top-navigation. Btw, if I change the a-tag to a <p> f.e. everything seems fine.

解决方案

You're using the deprecated .toggle function. It's removed in jQuery >= 1.9.0, so if you're using that version this code will invoke the .toggle animation function instead, where the second function is the callback (and will be executed immediately in this case).

Instead, you should implement such functionality yourself:

var toggleState = true;
$('#autoUpdate').on("click", function() {
  if(toggleState) {
    alert('a');
  } else {
    alert('b');
  }
  toggleState = !toggleState;
});

这篇关于jQuery:将.toggle添加到< a>使它消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！