0

3つのリスト項目で構成されるナビゲーションパネルを作成しようとしています。リストアイテムをクリックすると、対応するリンクのセット（subnav）がスライドして表示されます。

ここに動作するデモがあります：http：//jsfiddle.net/M8fS3/2/

このデモでは、テクニックは機能しますが、少しバグがあります。リンクをクリックするほど、閉じるボタンと（+）ボタンの位置が失われるようです。それらは相対的な位置を失い、親ではなくコンテナに対して絶対的に配置されているかのように動作します。

これを別の方法で作成するか、他の開発者がこの同じタスクを実行するためのより優れた手法を持っているかどうかを確認したいと思います。現在、私のjqueryは次のとおりです。

$("#serviceBox li a").on("click", function(){
        $(this).animate({
            'left' : -250
        }, {duration: 200, queue: false, easing: 'linear'});

        $(this).next(".panel").animate({
            'left' : 0
        },  {duration: 200, queue: false, easing: 'linear'});
    });

    $("a.closePanel").on("click", function(){
        $(this).parent().animate({
            'left' : 250
        },  {duration: 200, queue: false, easing: 'linear'});

        $(this).parent().prev("a").animate({
            'left' : 0
        },  {duration: 200, queue: false, easing: 'linear'});
    });

アニメーションを互いに同期させたいので、キューをfalseに設定しています。ここでHTMLとCSSを表示したい場合はお知らせください（現在はフィドルです）。前もって感謝します。

4

1 に答える 1

0

閉じるボタンと開くボタンの位置が失われた理由は、親コンテナの相対値を継承していたため、絶対位置が上書きされたためです。単に追加position:relativeして#serviceBox li .panel a.closePanel修正しました！

于 2013-03-26T16:42:27.177 に答える