javascript - 单击父元素时子元素中的jQuery淡入淡出

Question

当使用单击父元素时，我试图淡入子元素jQuery，但.children()似乎没有完成我想要做的事情。

我试图<h2>在单击元素时使元素淡入<h1>。

Javascript：

$(document).ready(function() {
    $('h2').hide();
    $('h1').bind('click', function() {
        $(this).children().fadeIn(400);
    });
});

这是我的代码：

HTML：

<h1>
Visible Parent
    <h2>
    Hidden Child
    </h2>
</h1>

AJSFiddle代码可以在这里找到：http: //jsfiddle.net/jHkAB/5/

解决了：

通过将<h1>and<h2>元素分开，然后使用.next()来选择元素之后的<h1>元素，当点击它之前的元素时，下一个元素会淡入。

可以JSFiddle在这里找到代码：http: //jsfiddle.net/bazmegakapa/jHkAB/16/。

score 4 · Accepted Answer

标题元素（h1,h2等）不能相互包含，因此您的 HTML 被浏览器规范化并变为：

<h1>
Visible Parent
</h1>
    <h2>
    Hidden Child
    </h2>

这就是为什么你的动画不会触发的原因，因为h2它不再是一个孩子h1。

1 回答 1