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功能

回答

相关问题