0

JQuery UI アコーディオンに似たものを書いていますが、垂直です。1つの例外を除いて、かなりうまく機能しています。3 番目のタブをクリックすると、左に浮かび、期待どおりに必要なテキストが表示されますが、2 番目のタブの前の位置に移動します。タブ オーダーを 123 ではなく 132 にします。他のすべての状態では、番号は問題ありません。

フロートを正しい順序で停止させることについての考え

私は使用できる他の垂直アコーディオンを認識していますが、js は私の苦手分野の 1 つであり、学習のためにこれを行っています。

私はそれをjsfiddleに保存しました

私のJavascriptコード

    $(document).ready(function(){
            $("#1").css("background-color","#191970");
            $("#1").css("width", "50px");
            $("#1").css("float", "left");
            $("#2").css("background-color","#191970");
            $("#2").css("width", "50px");
            $("#2").css("float", "right");
            $("#3").css("background-color","#191970");
            $("#3").css("width", "50px");
            $("#3").css("float", "right");
            $("#boxmain").css("background-color", "#CCC");
            $("#boxmain").css("width", "400px");

            $("#boxmain").text($("#onet").text());
            $('p').hide();



    $("#1").click(function() {
            $("#2").css("float", "right");
            $("#3").css("float", "right");
            $("#boxmain").effect("highlight", {color: '#DDD'}, 900);
            $("#boxmain").text($("#onet").text());
    });

    $("#2").click(function() {
            $("#2").css("float", "left");
            $("#3").css("float", "right");
            $("#boxmain").effect("highlight", {color: '#DDD'}, 900);
            $("#boxmain").text($("#twot").text());
    });

    $("#3").click(function() {
            $("#3").css("float", "left");
            $("#2").css("float", "left");
            $("#boxmain").effect("highlight", {color: '#DDD'}, 900);
            $("#boxmain").text($("#threet").text());
    });
});
4

2 に答える 2

1

div は、マークアップでそのように並べられます。フロートの向きを変えても思うような効果は得られません。boxmain代わりに、 divを移動できます。代わりに次のコードを検討してください。

http://jsfiddle.net/Lanny/4snqy/18/

于 2013-06-22T21:10:32.887 に答える
1

これをかなり簡単にするお手伝いをします。読むべきことはたくさんありますが、必要に応じて、最初にjsfiddleで動作するのを見ることができます。フロートを交換する必要はありません。異なるコンテナーを交換するだけです。まず、いくつかの CSS:

.accordion {
    height:200px;
    float: left;
    border:#fff solid 1px;
    border-radius: 10px 10px 10px 10px;
    color:white;
    width: 50px;
    background: #191970;
}

.boxMain {
    width: 400px;
    background: #CCC;
}

次に、HTML- アコーディオン クラスを使用して整理する方法に注目してください。

<div style="height:200px;width:558px;" id="box">
    <div id="1" class="accordion">1</div>
    <div id="boxmain" class="accordion boxMain"></div>
    <div id="2" class="accordion">2</div>
    <div id="3" class="accordion">3</div>
</div>

<p id="onet">Number One Text</p>
<p id="twot">Number Two Text</p>
<p id="threet">Number Three Text</p>

今スクリプト。代わりに CSS で行われるため、すべての CSS ステートメントを削除しました。.click() メソッドについては後で説明します。

$(document).ready(function(){
    $("#boxmain").text($("#onet").text());
    $('p').hide();          

    $("#1").click(function() {
        $("#boxmain").insertAfter(this);
        $("#boxmain").effect("highlight", {color: '#DDD'}, 900);
        $("#boxmain").text($("#onet").text());
    });

    $("#2").click(function() {
        $("#boxmain").insertAfter(this);
        $("#boxmain").effect("highlight", {color: '#DDD'}, 900);
        $("#boxmain").text($("#twot").text());
    });

    $("#3").click(function() {
        $("#boxmain").insertAfter(this);
        $("#boxmain").effect("highlight", {color: '#DDD'}, 900);
        $("#boxmain").text($("#threet").text());
    });
});

click メソッドは、「this」の概念を使用して、click() が実行されている要素を参照します。$("#1").click()$(this)の場合は#1 を参照します。フロートをシャッフルしようとする代わりに、代わりに #boxmain 要素を移動します。

于 2013-06-22T21:13:27.307 に答える