jQuery动画幻灯片上/下内容

jQuery animate slideUp/Down content

本文关键字：动画 幻灯片 jQuery      更新时间：2023-09-26

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

我想创建两个并排的链接，在这些链接下面将隐藏一些内容。内容将根据单击的链接显示。我很难弄清楚如何访问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应该animation.redirectDefaultInner和#redirectCustom应该animatic.redirectCustomInner。

您可以这样做：

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

您可以使用.closest（），该方法将检索与您传递的选择器最接近的第一个匹配项，例如：

jQuery("#redirectDefault").click(function(){
     jQuery(this).closest(".redirectDefaultInner").animate(/*do stuff*/);
});
相关文章：