버튼을 클릭하면 jQuery로 CSS 스타일을 어떻게 전환할 수 있나요?

jQuery Toggle CSS

이 질문에는 사용자가 버튼을 클릭할 때 두 CSS 스타일 사이를 전환하는 JavaScript 토글이 필요합니다. 첫 번째 클릭에서는 메뉴가 표시되고 CSS가 조정되어야 하며, 두 번째 클릭에서는 원래 상태로 되돌아가야 합니다. 제공된 코드는 CSS 토글을 설명하지 않으므로 해결 방법이 필요합니다.

한 가지 해결 방법은 특히 jQuery 1.9 미만 버전의 경우에는 Toggle() 이벤트를 사용하는 것입니다. 작동 방식은 다음과 같습니다.

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

이 코드는 첫 번째 클릭에서 "user_button" 요소의 테두리 반경을 0px로 설정하여 "user_options" 메뉴를 효과적으로 표시하고 두 번째 클릭에서 5px로 재설정합니다. , 원래 상태로 되돌립니다.

alecwh가 권장하는 대체 접근 방식은 CSS 클래스를 사용하여 토글을 관리하는 것입니다. 이것은 더 깨끗하고 유지 관리가 더 쉽습니다. 수정된 버전은 다음과 같습니다.

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

이 코드는 첫 번째 클릭 시 "user_button" 요소에 "active" 클래스를 추가합니다. 이는 스타일을 다르게 지정하고 두 번째 클릭 시 제거합니다. 초기 상태로 되돌립니다.

위 내용은 버튼을 클릭하면 jQuery로 CSS 스타일을 어떻게 전환할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!