1

我想知道你怎样才能让这个完美的例子向上滑动而不是将“导航”向下推

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 它是固定定位..（将其更改为相对只会弄乱它）？

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

院长

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

更新 3**

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

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

4

3 回答 3

3

像这样吗？

更新：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);

PS：新的 js、html 和 css。禁用 Javascript 后看起来也不错。

于 2013-08-12T16:54:09.963 回答
2

将此添加到您的 CSS 中：

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

并更改.info-panel为：

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

小提琴

于 2013-08-12T16:00:34.873 回答
1

您可能想尝试使用带有一些选项的jQuery UI 选项卡。

工作示例

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

 });
于 2013-08-12T17:10:39.047 回答