javascript - jQuery 切换不隐藏可见元素

Question

我正在编写 Greasemonkey 脚本，大致内容如下:

Javascript:

var togglingLink = document.createElement("a");
$(togglingLink)
    .attr('href', 'somelink')
    .html('<div>foo</div><div style="display:none">bar</div>');

$(togglingLink).children().toggle();
// Then I insert it into the page.

这使得这个 HTML:

<a href="somelink">
    <div>foo</div>
    <div style="display:none">bar</div>
</a>

$().toggle() 只是使隐藏的 div 可见，它并没有隐藏可见的 div。我在这里缺少什么？

<小时/>

James' jsfiddle确实有效。但我的 Greasemonkey 脚本中的相同代码不起作用。

根据 bobek 的回答，我还尝试将 div 更改为 span，但这并没有为我解决问题。

Answer 1

我终于明白了这一点。在将元素附加到页面之前，我实际上正在运行 $().toggle(); 。这就是导致 jQuery 无法按预期切换的原因。一旦我将其设置为$().toggle();，在追加之后，它就可以正常工作了。