单击父元素时，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>

代码的JSFiddle可以在这里：http://jsfiddle.net/jHkAB/5/

解决：

通过分隔<h1>和<h2>元素，然后使用.next()选择<h1>元素之后的元素，下一个元素在其前面的元素为淡入时淡入点击。

可在此处找到JSFiddle代码：http://jsfiddle.net/bazmegakapa/jHkAB/16/。

Answer 1

标题元素（h1，h2等）cannot be contained in each other，因此您的HTML会被浏览器规范化并变为：

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

这就是动画不会触发的原因，因为h2不再是h1的孩子了。