Div活動狀態不粘onclick

我有一個div，當點擊時有另一個div在它下滑動通過切換，它可以下滑，如果你再次點擊。 ialso想要做的是給div按鈕添加一個:active狀態，以便在開啓div切換時改變圖像，但是當您點擊div按鈕時，您將獲得活動狀態圖像的快速閃爍，然後它會進入回到默認值。由於某種原因，:active狀態不是粘連的，我無法找到原因。Div活動狀態不粘onclick

這裏是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--->

感謝所有幫助

來源

2012-07-28 Arken

:active和增加一個類active是兩個非常不同的東西。 :active是虛擬類添加到一個元素，而它是活動的（而鼠標停下來）。而你正在添加一個正常的css類active。你最有可能有一些CSS，如：

.server_status_button:active { ... }

如果更改到：

.server_status_button.active { ... }

那麼它應該工作。

來源

2012-07-28 23:51:28 Nik

確定很好，工作，當我點擊它的圖像改變爲活動圖像，但當我再次點擊它下降，它下滑，但圖像不會改回默認圖像，任何想法什麼可能造成這種情況？ – Arken 2012-07-28 23:54:42

我會說if語句if（$（「。server_status_button」）。is（「：visible」）.length> 0）'總是如此。查看jQuery的hasClass函數來確定按鈕是否處於活動狀態。 – Nik 2012-07-29 00:00:16

好，我解決了它，感謝您的幫助'if（$（「。server_status_button」）。hasClass（「active」））'感謝所有的幫助 – Arken 2012-07-29 00:08:15

的:active CSS選擇器選擇當前正被元素點擊加上它的所有祖先。只要按住鼠標按鈕，它就會持續。你的代碼正在做的是添加一個類，它是在你的CSS中使用微妙差異的.active來選擇的。

來源

2012-07-28 23:51:14 Neil

Div活動狀態不粘onclick

回答

相關問題