JQuery按鈕啓用和禁用點擊後的CSS功能

-1

我試圖找出一種方法來使單擊LeaderboardButton時將其DIV更改爲具有底部邊框半徑。（它是這樣）。但是我怎麼能再次點擊，讓它重置爲沒有邊界半徑。本質。你點擊一次，邊界半徑。再次單擊，無邊框半徑。再次點擊，邊界半徑回來。再次點擊並且邊框半徑離開。等等。基本上和CSS半徑函數的ON/OFF。JQuery按鈕啓用和禁用點擊後的CSS功能

下面是我的代碼如下。

$('#left-container').click(function(){ 
    $('#leaderboard').slideToggle("slow", function(){ 
     $('#leadeboardButton').css({borderTopLeftRadius: 10, 
      borderTopRightRadius: 0, 
      borderBottomLeftRadius: 10, 
      borderBottomRightRadius: 10, 
      WebkitBorderTopLeftRadius: 10, 
      WebkitBorderTopRightRadius: 0, 
      WebkitBorderBottomLeftRadius: 10, 
      WebkitBorderBottomRightRadius: 10, 
      MozBorderRadius: 10 
     }), function(){ 
$('#leadeboardButton').css({borderTopLeftRadius: 10, 
    borderTopRightRadius: 0, 
    borderBottomLeftRadius: 0, 
    borderBottomRightRadius: 0, 
    WebkitBorderTopLeftRadius: 10, 
    WebkitBorderTopRightRadius: 0, 
    WebkitBorderBottomLeftRadius: 0, 
    WebkitBorderBottomRightRadius: 0, 
    MozBorderRadius: 0 
    }); 
        } 
});

來源

2014-06-26 paintball247

如果您創建兩個CSS類，其中兩個CSS類將具有不同的CSS類，將是可能的。每次點擊按鈕後，檢查與該按鈕關聯的現有類並更改該類。

您可以使用jquery方法toggleClass在兩個類之間進行切換。

來源

2014-06-26 17:02:45 dvk317960

我會將您的邊框樣式移動到您的CSS。確保你有一個邊界類（我們稱之爲邊界）。然後你的JavaScript會變得更簡單。

$("#leftcontainer").click(function() { 
    if ($("#leftcontainer").hasClass("border")) { 
     $("#leftcontainer").removeClass("border");  
    } else { 
     $("#leftcontainer").addClass("border"); 
    } 
});

這裏有一個的jsfiddle：http://jsfiddle.net/rrXCU/2/

來源

2014-06-26 17:15:31

JQuery按鈕啓用和禁用點擊後的CSS功能

回答

相關問題