jQuery 버튼 클릭으로 CSS 상태를 전환하는 방법은 무엇입니까?

jQuery 버튼 클릭으로 CSS 상태 전환

대화형 웹 애플리케이션을 구축할 때 사용자 입력에 따라 다양한 CSS 상태 간에 전환해야 하는 경우가 종종 있습니다. . 이 시나리오에서는 버튼 클릭 시 메뉴를 표시하고 모양을 변경하려고 합니다.

해결책:

제공된 코드는 토글 메소드를 사용하여 메뉴를 표시하거나 숨깁니다. ID가 "user_button"인 버튼을 클릭하면 ID가 "user_options"인 메뉴가 표시됩니다. 그러나 CSS 속성을 전환하는 기능이 부족합니다.

이 문제를 해결하려면 콜백 함수와 함께 전환 메서드를 사용하거나 jQuery의 addClass 및 RemoveClass 메서드를 활용할 수 있습니다.

사용 콜백 함수로 전환(jQuery < 1.9):

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

이 코드 두 개의 콜백 함수를 정의합니다. 하나는 버튼을 처음 클릭할 때(슬라이딩 효과), 다른 하나는 다시 클릭할 때(원래 상태로 돌아가기)에 사용됩니다.

또는 클래스 사용:

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

여기서 CSS 속성을 직접 변경하는 대신 CSS 클래스(이 경우 "활성")를 추가 및 제거하여 전환합니다. 원하는 스타일. 이 방법은 더 유연하며 하드 코딩된 CSS 값을 사용하지 않습니다.

이러한 솔루션 중 하나를 구현하면 버튼에 대한 응답으로 메뉴 요소의 표시 및 CSS 모양을 전환하는 원하는 기능을 얻을 수 있습니다. 클릭하세요.

위 내용은 jQuery 버튼 클릭으로 CSS 상태를 전환하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!