嵌套div上的jQuery动画 [英] jQuery animation on nested divs

问题描述

我试图创建一个与页面中不同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'>一些2013东西< / p> 
< / div> 
 
< div id =2012> 
< div class ='item'>一些2012东西< / div> 
< / div> 
 
< div id =2011> 
< div class ='item'>一些2011东西< / 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 /脚本。我会使用类。

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

<$ c中的任何 div $ c> #topDiv> div 将只选择＃div1 。只是 #topDiv 的直系后裔。

I'm trying to create a nav of links that correspond to different divs in the page, and when you click on the link, it hides all the other divs and slideDown the respective div. I am almost there, but as you can see, it only seems to work on anything that isn't a nested div. (So if I include just text inside that section or p tags or anything else, it will show, but not the children divs.) My code is here: http://jsfiddle.net/DScMX/16/

Furthermore, I want to be able to display the latest year (in my example) when the page is loaded, and then when clicking on each year, as mentioned, it hides what's on the page and displays the correct section.

<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>

and the 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') selects all divs below #yearscontent. If you use $('#yearscontent > div'), it will select only the direct descendant of #yearscontent.

Also, element id's need to be unique, so you'll need to rework your html/script a little bit. I would use classes instead.

Updated fiddle: http://jsfiddle.net/N5euG/

Update to answer your question in the comments

Consider this html:

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

#topDiv div will select #div1, #div2, and #div3. Any divs within #topdiv

#topDiv > div will select only #div1. Just the direct descendant of #topDiv.

这篇关于嵌套div上的jQuery动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！