隐藏 Div 滑动超过可见 div

Question

我在页面顶部有 1 个可见的 div，代码后面有 8 个隐藏的 div。

我想要那个可见 div 中的 onClick 事件，使后续 div 变得可见，并且 "slidedown" 从页面顶部超过最后一个 div。像幻灯片一样。

到目前为止，我的代码只是将旧的 div 下推而不是替换它。

    <script src="js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        $('#n2').hide();
        $('#n1A').click(function () {
            var state = $('#n2').is(':visible');
            $('#n2')[state?'hide':'slideToggle'](state ? 0 :'slow');
        });
    });
    </script>

HTML

    <div id="n1">
    <a href="#" id="n1A">...</a>
    </div>

    <div id="n2">
    <a href="#" id="n2A">...</a>
    </div>

    (and so on.  for 8 divs)

我怎样才能让每个 div 的下拉都超过前一个 div？
我是否需要为所有 8 个 div ID 单独编写脚本代码，或者变量可以简化这个吗？
如何将 "easeOutBounce" 添加到动画中？

感谢您的帮助。

Answer 1

这是一个应该可以帮助您顺利入门的示例。我只是将它们绝对定位以使其能够相互堆叠。不过，有几种不同的方法可以做到这一点。

使用类使您不必为每个单独的元素编写 js。

JSFiddle

示例DOM：

<div id="n1" class="slide"> <a href="#" id="n1A">...1</a>

</div>
<div id="n2" class="slide"> <a href="#" id="n2A">...2</a>

</div>
<div id="n3" class="slide"> <a href="#" id="n3A">...3</a>

</div>
<div id="n4" class="slide"> <a href="#" id="n4A">...4</a>

示例javascript：

$(document).ready(function () {
    $('.slide').not("#n1").hide();
    $('.slide').click(function () {
        var $this = $(this);
        var $next = $this.next();
        if (!$next.length) {
            $next = $this.siblings(".slide").first();
        }
        $this.css("z-index","-1"); //make sure $next can slide OVER $this
        $next.slideDown("slow", function () {
            $this.hide().css("z-index","0");
        });
    });
});

要更改动画类型 (easeOutBounce)，您可能必须使用 jQueryUI - http://api.jqueryui.com/easings/

隐藏 Div 滑动超过可见 div

Hidden Div Slidedown OVER visible div

jquery

slidetoggle

slidedown