單擊父元素時，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 。