Jquery SlideToggle div 向上滑动(动画)

Question

我想知道如何让这个完美的示例向上滑动而不是将“导航”向下推

http://jsfiddle.net/NPRfM/3/

...现在，它从上到下显示(向下推菜单)...我想要相反的..意思是框向上滑动以显示并向上推导航 - 单击一个将菜单向上推以显示盒子。

那个 fiddle 在我想做的事情上的标记上，只是我希望它向上滑动以显示

我试过类似的东西但是不行

.animate({scrollTop: $('.dropdown').offset().top}, 250);

我是否还必须使用一些 css 定位来使其偏移？ ...仍在学习 jquery 的诀窍

更新**

这是我想要它做的:

http://jsfiddle.net/WFxLJ/1169/

....唯一的问题是，我想不出像第一个 jfiddle 那样的方法...它有两个功能。

-==单击 div 1===向上滑动 - 显示 div 1 的内容(在同一部分 2)

====在======显示div 2的内容(在1的同一部分)后单击div 2

=====再次单击 div 2======= 向下滑动框以隐藏部分

反之亦然

希望我说得有道理。

更新 2**

我快明白了!检查 jfiddle:

http://jsfiddle.net/b7C2d/315/

所以唯一剩下的就是菜单(黑色)需要向上推，所以它看起来像是在显示......我假设这只是 CSS 是固定定位......(将其更改为 relative 只会弄乱它)？

我找到了一个这样做的网站:

Dean

但他们的代码比它应该的更复杂......而且它看起来像是从 2001 年开始的(我绝不会试图弄乱这段代码)......但无论如何这就是我想做的。

更新 3**

这是我能得到的最接近的，但它看起来好像少了几个螺丝:(

http://jsfiddle.net/b7C2d/347/

Answer 1

喜欢吗？

更新:jsFiddle

/* CREATED BY SHIVAM BHALLA */

(function($) {
    $('body').addClass('js');

    var $toggler = $('#toggler'),
        $wrapper = $toggler.find('.wrapper'),
        $pager = $toggler.find('.pager'),
        $content = $toggler.find('.content');

    $toggler.css('height', $content.height() + $pager.height());
    $wrapper.css('top', $content.height());
    $content.hide();

    $pager.find('a').on('click', function(e) {
        var $this = $(this),
            $target =  $( $(this).attr('href') ),
            $count = 0;

        if ($count === 0) {
            $wrapper.animate({'top' : 0});
            $count = 1;
            $this.addClass('selected');
        } 
        if ($target.hasClass('active')) {
            $('.selected').removeClass('selected');
            $wrapper.animate({'top' : $content.height()}, function() {
                $target.hide().removeClass('active');
            });
        } else {
            $wrapper.find('.active').slideUp().removeClass('active');
            $target.addClass('active').slideDown();
            $('.selected').removeClass('selected');
            $this.addClass('selected');
        }       

        e.preventDefault();            
    });



})(jQuery);

P.S:新的 js、html 和 css。在禁用 Javascript 的情况下看起来也不错。