jQuery 토글 CSS?

jQuery 토글 CSS?

---

사용자가 버튼 ( #user_button)을 클릭하면 메뉴 ( #user_options)를 표시하고 CSS를 변경하고 사용자가 다시 클릭하면 정상으로 돌아가도록 CSS 간을 전환하고 싶습니다 . 지금까지 내가 가진 전부입니다.

$('#user_button').click( function() {
    $('#user_options').toggle();
    $("#user_button").css({    
        borderBottomLeftRadius: '0px',
        borderBottomRightRadius: '0px'
    }); 
    return false;
});

아무도 도울 수 있습니까?

---

1.9 미만의 jQuery 버전의 경우 ( https://api.jquery.com/toggle-event 참조 ) :

$('#user_button').toggle(function () {
    $("#user_button").css({borderBottomLeftRadius: "0px"});
}, function () {
    $("#user_button").css({borderBottomLeftRadius: "5px"});
});

이 경우 클래스를 사용하는 것이 CSS를 직접 설정하는 것보다 낫습니다. 앞서 언급 한 addClass 및 removeClass 메소드를 살펴보십시오.

$('#user_button').toggle(function () {
    $("#user_button").addClass("active");
}, function () {
    $("#user_button").removeClass("active");
});

---

jQuery 에서 toggleClass 함수를 사용하고 예를 들어 클래스에 CSS를 정의합니다.

/* start of css */
#user_button.active {
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px; /* user-agent specific */
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px; /* etc... */
}
/* start of js */
$('#user_button').click(function() {
    $('#user_options').toggle();
    $(this).toggleClass('active');
    return false;
})

---

jQuery의 .addClass 및 .removeClass 명령을 사용하고 상태에 대해 두 개의 다른 클래스를 만들 수 있습니다. 이것은 나에게 가장 좋은 방법이 될 것입니다.

---

이니셜 코드에는 borderBottomLeftRadius : 0px 가 있어야합니다 .

$('#user_button').toggle().css('borderBottomLeftRadius','+5px');

---

가장 좋은 방법은 같은 CSS의 클래스 스타일을 설정하는 것입니다 .showMenu및 .hideMenu내부의 다양한 스타일로. 그런 다음 다음과 같이 할 수 있습니다.

$("#user_button").addClass("showMenu"); 

참고 URL : https://stackoverflow.com/questions/3337621/jquery-toggle-css