Question

我试图找到一种方法来在单击更改其DIV以使其具有底部边界半径时使LeaderboardButton。（它确实如此）。但是我怎么能再次点击，重置为没有边界半径。实质上。单击一次，边框半径。再次单击，无边框半径。再次单击，边框半径返回。再次单击并保留边界半径。等等基本上和CSS半径函数的ON / OFF。

以下是我的代码。

$('#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
     });
                    }   
});

Answer 1

我会将您的边框样式移动到您的CSS中。确保边框有一个类（我们称之为边框）。然后你的javascript会变得更简单。

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

这是一个JSFiddle：http://jsfiddle.net/rrXCU/2/

Answer 2

如果你创建两个CSS类，其中两个css类将具有不同的CSS类，这是可能的。每次单击按钮后，检查与该按钮关联的现有类并更改该类。

您可以使用jquery方法toggleClass在两个类之间切换。

JQuery Button在Clicks上启用和禁用CSS功能

2 个答案: