> 웹 프론트엔드 > CSS 튜토리얼 > jQuery의 .hide() 대신 \'visibility:hidden\'을 사용하여 요소 가시성 제어를 어떻게 달성할 수 있습니까?

jQuery의 .hide() 대신 \'visibility:hidden\'을 사용하여 요소 가시성 제어를 어떻게 달성할 수 있습니까?

Mary-Kate Olsen
풀어 주다: 2024-11-27 02:57:09
원래의
376명이 탐색했습니다.

가시성 확보: jQuery의 .hide() 메서드에 대한 대안 탐색

프런트엔드 개발 영역에서 jQuery의 .hide() 메서드는 "display: none"을 사용하여 요소 가시성을 전환하는 편리한 방법으로 유명해졌습니다. 그러나 "가시성: 숨겨진" 속성을 활용하는 솔루션을 찾고 있다면 어떻게 될까요?

다행히도 선호하는 CSS를 사용하여 요소의 가시성을 변경하면서 .hide()의 간결한 구문을 모방할 수 있는 방법이 있습니다. 환경. 핵심은 사용자 정의 플러그인을 만드는 데 있습니다.

jQuery.fn.visible = function() {
    return this.css('visibility', 'visible');
};

jQuery.fn.invisible = function() {
    return this.css('visibility', 'hidden');
};
로그인 후 복사

이러한 플러그인은 가시성을 "표시" 또는 "숨김"으로 설정하는 간단한 기능을 제공합니다.

더 다양한 접근 방식을 원하는 경우 다음을 고려하세요. jQuery의 내장 토글() 함수 수정:

!(function($) {
    var toggle = $.fn.toggle;
    $.fn.toggle = function() {
        var args = $.makeArray(arguments),
            lastArg = args.pop();

        if (lastArg == 'visibility') {
            return this.visibilityToggle();
        }

        return toggle.apply(this, arguments);
    };
})(jQuery);
로그인 후 복사

이 수정은 토글()을 확장하여 "가시성"을 다음과 같이 허용합니다. 인수를 사용하여 표시 상태와 숨겨진 상태 사이를 편리하게 전환할 수 있습니다.

이 솔루션을 사용하면 "visibility: Hidden" 속성을 사용하여 요소 가시성을 쉽게 관리할 수 있으며 jQuery의 .hide()에 대한 유연한 대안을 제공합니다. 방법입니다.

위 내용은 jQuery의 .hide() 대신 \'visibility:hidden\'을 사용하여 요소 가시성 제어를 어떻게 달성할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿