潜水活动状态不粘舔

Div active state not sticking onclick

本文关键字：活动状态 潜水      更新时间：2024-04-01

我有一个div，当单击时，它下面有另一个div通过切换向上滑动，如果再次单击，它可以向下滑动。ialso想要做的是向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--->

感谢您的帮助

:active和添加一个类active是两件非常不同的事情。:active是在元素处于活动状态时（鼠标按下时）添加到元素的伪类。而您正在添加一个普通的css类active。你很可能有一些css，比如：

.server_status_button:active { ... }

如果您将其更改为：

.server_status_button.active { ... }

那么它应该起作用。

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

相关文章：