`.hide()` と `.show()` を超えて jQuery で要素の可視性を制御するにはどうすればよいですか?

jQuery で要素の可視性を実現: .hide() と .show() を超えて

jQuery の .hide() と .show( ) メソッドは、CSS 表示設定に基づいて要素の表示設定を操作するための典型的なツールになりました。ただし、表示プロパティの調整が十分ではない、または調整が望ましくないシナリオも考えられます。このニーズに対処するために、可視性プロパティをターゲットとするカスタム jQuery 関数を作成できます。

カスタム可視性関数の作成

可視性プロパティをターゲットとするカスタム関数を作成するには、次のようにします。 .css() メソッドを活用できます。次の例は、非表示、表示、および表示/非表示を切り替える関数を定義する方法を示しています。

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

toggle() 関数のオーバーロード

とのよりシームレスな統合既存の 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);

これらのカスタム関数またはオーバーロード手法を使用すると、CSS 表示設定に頼ることなく、使い慣れた jQuery 構文を使用して要素の可視性を簡単に管理できるようになります。

以上が`.hide()` と `.show()` を超えて jQuery で要素の可視性を制御するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。