Блог

Я пытаюсь найти способ заставить LeaderboardButton при нажатии изменить его DIV, чтобы иметь нижний радиус границы. (Это делает это). Но как я могу при повторном нажатии сбросить его на отсутствие радиуса границы. По сути. Вы нажимаете один раз, радиус границы. Нажмите еще раз, радиус границы отсутствует. Нажмите еще раз, радиус границы вернется. Нажмите еще раз, и радиус границы исчезнет. и т.д. и т.п. По сути, и ВКЛЮЧЕНИЕ / выключение функций CSS radius.

Вот мой код ниже.

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

Я бы перенес ваш стиль границ в ваш css. Убедитесь, что у вас есть один класс для границы (мы будем называть его границей). Тогда ваш javascript станет намного проще.

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

Вот JSFiddle: http://jsfiddle.net/rrXCU/2 /

Это будет возможно, если вы создадите два класса CSS, где оба класса css будут иметь разные классы CSS. после каждого нажатия на кнопку проверяйте существующий класс, связанный с кнопкой, и меняйте класс .

вы можете использовать метод jquery toggleClass для переключения между двумя классами.