jQuery切换不隐藏可见元素答案

【问题标题】：jQuery toggle not hiding visible elementjQuery切换不隐藏可见元素
【发布时间】：2013-11-01 20:15:25
【问题描述】：

我正在编写一个 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，但这并没有为我解决问题。

【问题讨论】：

为我工作jsfiddle.net/J5Xcs
检查应用于切换目标“div”的 CSS。
在中包含
无效。
@bobek 我不这么认为
@Keen 即使你更新了代码，它仍然可以工作jsfiddle.net/ZHAuP

标签： javascript jquery

【解决方案1】：

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

【讨论】：

【解决方案2】：

在<a> 中包含<div> 在 HTML <div> 更改为<span>，然后看看它是否有效。

【讨论】：

似乎在 HTML5 中有效。转到此处validator.w3.org/#validate_by_input，然后粘贴<!DOCTYPE html><html><head><title>a</title></head><body><a><div>a</div></a></body></html>。
@wared 是的，但在旧版本中不是。如果他在 IE8 中这样做，它可能无法正常工作。
我在 Firefox 24 中这样做。
用 Firefox 25.0 试过，效果很好。切换其他元素（非嵌套）是否适合您？
@JohannesH。是的，在网页中切换随机元素效果很好。出于某种原因，我的可见 div 拒绝隐藏在我的脚本中。