javascript - 嵌套 div 上的 jQuery 动画

Question

我正在尝试创建与页面中不同 div 相对应的链接导航，当您单击该链接时，它会隐藏所有其他 div 并向下滑动相应的 div。我快到了，但如您所见，它似乎只适用于非嵌套 div 的任何内容。 (因此，如果我只在该部分或 p 标签或其他任何内容中包含文本，它将显示，但不会显示子 div。)我的代码在这里:http://jsfiddle.net/DScMX/16/

此外，我希望能够在加载页面时显示最近的年份(在我的示例中)，然后在单击每年时，如前所述，它会隐藏页面上的内容并显示正确的部分。

<div id="years_links">
    <a href="#" id="2013">2013</a> | 
    <a href="#" id="2012">2012</a> | 
    <a href="#" id="2011">2011</a>
</div>
<div id="yearscontent">
    <div id="2013">
        <pclass='item'>some 2013 stuff</p>
    </div>

    <div id="2012">
        <div class='item'>some 2012 stuff</div>
    </div>

    <div id="2011">
        <div class='item'>some 2011 stuff</div>
    </div>
</div>

和js

$(document).ready(function() {
    var yearscontent = $('#yearscontent');
    $('#yearscontent div').hide();
    $('#years_links a').click(function() {
        var year = $(this).attr('id');
        $('#yearscontent div').slideUp(300);
        $('#yearscontent #'+year).slideDown(300);
    });

}); 

Answer 1

$('#yearscontent div') 选择 #yearscontent 下面的所有 div。如果您使用 $('#yearscontent > div')，它将仅选择 #yearscontent 的直接后代。

此外，元素 ID 必须是唯一的，因此您需要稍微修改一下 html/脚本。我会改用类。

更新 fiddle :http://jsfiddle.net/N5euG/

更新在评论中回答你的问题

考虑这个 html:

<div id="topDiv">
    <div id="div1">
        <div id="div2">
            <div id="div3"></div>
        </div>
    </div>
</div>
<div id="div4"></div>

#topDiv div 将选择 #div1、#div2 和 #div3。 #topdiv

中的任何 div

#topDiv > div 将仅选择 #div1。只是 #topDiv 的直接后代。