ホームページ > ウェブフロントエンド > CSSチュートリアル > 要素の寸法に影響を与えずに jQuery の `.hide()` の機能を実現するにはどうすればよいですか?

要素の寸法に影響を与えずに jQuery の `.hide()` の機能を実現するにはどうすればよいですか?

Linda Hamilton
リリース: 2024-11-29 07:00:13
オリジナル
500 人が閲覧しました

How Can I Achieve the Functionality of jQuery's `.hide()` Without Affecting Element Dimensions?

可視性に関する jQuery の .hide() の代替手段の検索: Hidden

jQuery では、開発者は .hide() と.show() を使用して、CSS 表示プロパティを none に設定して要素の可視性を操作します。ただし、要素のサイズを変更せずに要素の可視性を非表示に設定する必要がある場合、.hide() のような同等の関数を見つけることが困難になる可能性があります。

カスタム プラグインの開発

1 つのアプローチは、必要な機能を提供するカスタム jQuery プラグインを作成することです。次のコード サンプルは、3 つのプラグインの作成を示しています。

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

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

jQuery.fn.visibilityToggle = function() {
    return this.css('visibility', function(i, visibility) {
        return (visibility == 'visible') ? 'hidden' : 'visible';
    });
};
ログイン後にコピー

これらのプラグインを使用すると、拡張されたvisible()、invisible()、visibilityToggle()関数を利用して、要素の可視性を変更せずに直接制御できます。物理サイズ。

元の jQuery toggle() のオーバーロードFunction

より使い慣れたアプローチを好む人のために、既存の jQuery toggle() 関数をオーバーロードして可視性の切り替えを処理することができます。 1 つの方法は次のとおりです。

!(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);
ログイン後にコピー

ただし、このアプローチは元の toggle() 関数を変更するため、お勧めできません。

最終的には、独自のプラグインを作成するか、トグルをオーバーロードするかを選択します。 () 関数を使用すると、提供されるソリューションは、visibility プロパティを通じて要素の可視性を変更するための jQuery の .hide() と同等の機能を提供します。

以上が要素の寸法に影響を与えずに jQuery の `.hide()` の機能を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート