javascript - 嵌套div上的jQuery动画

我正在尝试创建与页面中不同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);
    });

});

最佳答案

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

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

更新的小提琴：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。 div中的任何#topdiv

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