Jquery SlideToggle divs 向上滑动（动画）

Question

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

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

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

这把小提琴在我想做的事情上的标记，只是我想让它滑起来揭示

我尝试了类似的方法，但没有成功

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

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

更新**

这就是我想要它做的事情：

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

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

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

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

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

反之亦然

希望我说得通。

更新 2**

我几乎明白了！检查 jfiddle：

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

所以剩下的唯一一件事是菜单（黑色）需要向上推，所以它看起来像是在显示......我认为这只是 CSS 是固定定位吗..（将其更改为相对只会弄乱它）？

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

Dean

但是他们的代码比它应该的要复杂....加上它看起来像是从 2001 年开始的（我不会试图弄乱这段代码）..但无论如何这就是我想做的。

更新 3**

这是我能得到的最接近的，但它的行为就像缺少几个螺丝一样:(

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

Answer 1

将此添加到您的 CSS 中：

#panels {
    height: 90px; 
    overflow: hidden;
}

把.info-panel改成这个：

.info-panel { 
    display: none; 
    width: 300px; 
    padding: 50px 20px 20px 20px; 
    position: absolute; 
}

The Fiddle

Answer 2

喜欢吗？

更新：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 后看起来也不错。

Answer 3

您可能想尝试使用 jQuery UI tabs 并添加一些选项。

Working Example

 $(function () {
     $("#tabs").tabs({
         collapsible: true,
         active: false,
         fx: {
             height: 'toggle',
             duration: 'slow'
         }
     });

     // fix the classes
     $(".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *")
         .removeClass("ui-corner-all ui-corner-top")
         .addClass("ui-corner-bottom");
     // move the nav to the bottom
     $(".tabs-bottom .ui-tabs-nav").appendTo(".tabs-bottom");

 });