1

「ナビゲーション」を押し下げる代わりに、この完璧な例を上にスライドさせる方法を知りたい

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

...現在、上から下に表示されます (メニューを下に押します)...逆にしたい..つまり、ボックスが上にスライドして表示され、ナビゲーションが上に押し上げられます。

そのフィドルは私がやりたいことのマークにあるだけですスライドして明らかにしたいだけです

私はこのようなことを試しましたが、行きません

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

オフセットするには、いくつかのCSSポジショニングも使用する必要がありますか? ...まだjqueryのコツを学んでいます

アップデート**

HEREは私がやりたいことです：

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 に答える