单击父元素时，jQuery在子元素中淡入淡出

Question

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

单击<h1>元素时，我尝试使<h2>元素淡入。

使用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等） 不能相互包含 ，因此您的HTML由浏览器标准化并变为：

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

这就是为什么动画不会触发，因为h2不再是h1的子h1 。