Question

我有一个div，当点击它下面有另一个div时，它会向上滑动一个切换按钮，如果你再次点击它可以向下滑动。我还想做的是在div按钮上添加:active状态，以便在切换开始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--->

感谢您的帮助

Answer 1

:active并添加一个类active是两个非常不同的东西。 :active是一个伪类，当它处于活动状态时（当鼠标停止时）被添加到元素中。而你正在添加一个普通的css类active。你很可能有一些css，如：

.server_status_button:active { ... }

如果您将其更改为：

.server_status_button.active { ... }

然后它应该工作。

Answer 2

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

Div活动状态不坚持onclick

2 个答案: