0

クリックするとその下に別のdivがあり、トグルを介して上にスライドし、もう一度クリックすると下にスライドできます。:activeまた、div ボタンに状態を追加して、開始 div が切り替えられたときに画像を変更することも望んでいましたが、div ボタンをクリックすると、アクティブな状態の画像がすばやく点滅してから元に戻りますデフォルトに。何らかの理由で:active状態が固執しておらず、その理由がわかりません。

ここにジャバスクリプトがあります

    $(function()
{

    $(".server_status_button").click(function(event) {
        event.preventDefault();

        if($(".server_status_button").is(":visible").length > 0){

            $(this).removeClass("active");
        }
        else{

            $(this).addClass("active");
        }
        $("#status1").slideToggle();


    });

    $("#status1").click(function(event) {
        event.preventDefault();
        $("#status1").slideToggle();
    });

});

そして、これが全体のhtmlです

 <div id="server_status">
            <div class="server_status_button"></div><!---end server_status_button--->
            <div id="status1">
                <div class="status1_content" style="margin-bottom: 5px;">You are on:</div><!---end status1_content--->
                <div class="status1_content" style="font-size:12px;"><span style="font-weight: bold; font-color: #222;">Alnitak</span> - Status: <span style="color: #090;">Good</span></div><!---end status1_content--->
                <div class="status1_content"><span style="font-weight: bold; margin-bottom: 10px;">1300/10000</span> Players</div><!---end status1_content--->
                <div class="status1_content_link" onclick="location.href='servers.php';">List Servers</div><!---end status1_content--->
            </div><!---end status1--->
        </div><!---end server_status--->

助けてくれてありがとう

4

2 に答える 2

1

:activeクラスの追加activeは2つの非常に異なるものです。:activeは、要素がアクティブな間（マウスが下がっている間）に要素に追加される疑似クラスです。通常のcssクラスを追加しているのに対してactive。あなたはおそらく次のようないくつかのCSSを持っています：

.server_status_button:active { ... }

これを次のように変更した場合：

.server_status_button.active { ... }

その後、それは動作するはずです。

于 2012-07-28T23:51:28.787 に答える
0

CSSセレクターは、現在クリックされている要素とその:activeすべての祖先を選択します。マウスボタンを押している間だけ持続します。コードが実行しているのは.active、CSSで微妙に異なるものを使用して選択されたクラスを追加することです。

于 2012-07-28T23:51:14.650 に答える