0

我有一个 div，当单击它时，它下面的另一个 div 通过一个切换向上滑动，如果再次单击它可以向下滑动。我还想做的是向:activediv 按钮添加一个状态，以便在切换打开的 div 时它会更改图像，但是当您单击 div 按钮时，您会快速闪烁活动状态图像，然后它会返回为默认值。由于某种原因，:active状态没有坚持下去，我找不到原因。

这是javascript

    $(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是两件非常不同的事情。:active是在元素处于活动状态时（鼠标按下时）添加到元素的伪类。而您正在添加一个普通的 css 类active。您很可能有一些 CSS，例如：

.server_status_button:active { ... }

如果您将其更改为：

.server_status_button.active { ... }

那么它应该可以工作。

于 2012-07-28T23:51:28.787 回答
0

:activeCSS 选择器选择当前被点击的元素以及它的所有祖先。只要按住鼠标按钮，它就会持续。您的代码正在做的是添加一个类，该类是使用.activeCSS 中的细微差别选择的。

于 2012-07-28T23:51:14.650 回答