javascript - jQuery 动画幻灯片向上/向下内容

Question

基本问题，但我找不到任何相关主题能够准确回答我的需求。

我想并排创建两个链接，这些链接下面将隐藏一些内容。内容将根据单击的链接而显示。我无法弄清楚如何访问 dom 中的内容并使用 (this)。

HTML:

            <div class="redirectWrap">
                <a id="redirectDefault" class="redirectOuter" href="#">
                    <h4>Default URL</h4>
                </a>
                <a id="redirectCustom" class="redirectOuter" href="#">
                    <h4>Custom URL</h4>
                </a>
                <div class="redirectDefaultInner redirectBox hide">
                    content
                </div>
                <div class="redirectCustomInner redirectBox hide">
                    content
                </div>                  
            </div>

所以#redirectDefault应该为.redirectDefaultInner设置动画，而#redirectCustom应该为.redirectCustomInner设置动画。 (我将拥有其中的几个，这就是为什么我想利用 (this) 而不是每次都根据 id 将其写出来。

Answer 1

你可以这样做:

   $('.redirectOuter').click(function(){
   $(this).parent().find('.'+$(this).attr('id')+'Inner').animate(/*your animation code */);
    });