嵌套的div jQuery的动画(jQuery animation on nested divs)

我试图创建对应于不同的div在页面链接导航，当你点击链接，它会隐藏所有其他的div和了slideDown各自的股利。 我几乎没有，但你可以看到，它似乎只对任何不是一个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')选择下面的所有div #yearscontent 。 如果您使用$('#yearscontent > div')它会仅选择的嫡系#yearscontent 。

此外，元素的ID必须是唯一的，所以你需要返工您的HTML /脚本一点点。 我会用类来代替。

更新小提琴： 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 。

Answer 2:

我在一些CSS所以和“活动”类加让你上下滑动不是战战兢兢。

#yearscontent div:nth-child(1n+2) {
    display:none;
}

http://jsfiddle.net/N5euG/8/

文章来源: jQuery animation on nested divs