CSS の可視性を制御する jQuery 関数を作成するにはどうすればよいですか?

CSS の表示設定を操作する jQuery 関数の作成

jQuery では、.hide() メソッドと .show() メソッドを使用して CSS 表示を簡単に設定できます。プロパティをそれぞれ none と block に設定します。ただし、CSS の可視性プロパティを明示的に非表示に設定する同様の関数はありますか?

解決策

jQuery は可視性の設定に特化したネイティブ関数を提供していませんが、独自のものを簡単に作成できます。

カスタム表示設定の作成関数:

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';
    });
};

使用例:

$('#element').visible(); // Makes element visible
$('#element').invisible(); // Makes element invisible
$('#element').visibilityToggle(); // Toggles visibility

ネイティブ toggle() 関数のオーバーロード (非推奨):

!(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') を使用します。ただし、これは他のコンテキストで toggle() のデフォルトの動作をオーバーライドする可能性があるため、一般には推奨されません。

対話型 jsFiddle デモ:

https://jsfiddle。ネット/

以上がCSS の可視性を制御する jQuery 関数を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。