Question

我想知道你怎么能让这个完美的例子向上滑动而不是向下推'导航'

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

这个小提琴是关于我想要做什么的标记，只是我希望它向上滑动以显示

我试过这样的事情，但没有去

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

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

UPDATE **

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

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

....唯一的问题是，我无法像第一个jfiddle那样想办法...它有两种功能。

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

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

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

and vice -versa

希望我有意义。

更新2 **

我几乎得到了它！检查jfiddle：

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

所以唯一剩下的就是菜单（黑色）需要向上推，所以看起来它显示...我认为这只是CSS它是固定的定位..（改变它相对只是混乱它）？

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

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＆amp; CSS。禁用Javascript也很好看。

Answer 2

将此添加到您的CSS：

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

并将.info-panel更改为：

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

<强> The Fiddle

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");

 });

Jquery SlideToggle divs向上滑动（动画）

3 个答案: