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。我在这里想念什么？

---

詹姆斯的 jsfiddle确实有效。但是我的 Greasemonkey 脚本中的相同代码不起作用。

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

Answer 1

我终于想通了。我实际上是$().toggle();在将元素附加到页面之前运行的。这就是导致 jQuery 无法按预期切换的原因。一旦我在附加后完成它$().toggle();，它就会正常工作。

Answer 2

在 HTML < 5 中具有<div>内部<a>是无效的，并且某些浏览器可能无法使用它。改变你<div>的<span>，看看它是否有效。