0

その中にjQueryカルーセルが表示されていないjQueryスライドパネルがあります。

例: http://www.warface.co.uk/clients/warface.co.uk/

[ダッシュボードを表示] をクリックして、スライド パネルを表示します。

ボタン (前/次) は表示されていますが、カルーセルは表示されていません。たとえば、以下のカルーセルも追加しました。

スライドパネル用のCSSがあります

#panel {
    width: 100%;
    height: 500px;
    color: #999999;
    background: #272727;
    overflow: hidden;
    position: relative;
    z-index: 3;
    display: none;
}

削除display: none;すると修正されるようですが、ページの読み込み時にスライダーを下げたままにします。

4

1 に答える 1

1

それを割った：

次のように、表示ではなく高さを使用してパネルを非表示にする必要があります。

#panel {
    width: 100%;
    height:0px;
    color: #999999;
    background: #272727;
    overflow: hidden;
    position: relative;
    z-index: 3;
    }

次に、高さを500に変更して、JSでこれを表示します。

$(document).ready(function() {

    // Expand Panel
   $("#open").click(function(e){
       e.preventDefault();
        $("div#panel").animate({height: "500px"},"slow");
    });    

    // Collapse Panel
    $("#close").click(function(e){
        e.preventDefault();
        $("div#panel").animate({height: "0px"},"slow");
    });     

    // Switch buttons from "Log In | Register" to "Close Panel" on click
    $("#toggle a").click(function () {
        $("#toggle a").toggle();
    });  

     $(".anyClass").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev"
    });

});

jsfiddleで試したときに必要だった、ページが一番上にジャンプするのを防ぐpreventDefault（）の追加に注意してください。ただし、ライブアプリケーションではprobは必要ありませんが、それでも一般的には良い習慣です。実際の動作を確認したい場合は、次の場所で確認できます。http: //jsfiddle.net/LiamBailey/ERQzd/87/注：jsfiddleのウィンドウサイズには制限があるため、下にスクロールして閉じるパネルに移動する必要があります。 linkは、preventDefaultのためにパネルが上にスライドするのを見ることができないままにします。これを修正するために、少し上にスクロールを追加しまし $("html,body").animate({scrollTop: target},"fast");た。

于 2010-10-17T11:13:56.307 に答える