jQueryはhide()とtoggle()関数を使用してカメラブランド表示の非表示機能を実現します。

jQueryはhide()とtoggle()関数を使用してカメラブランド表示の非表示機能を実現します。

最近、jQuery を学習しているときに、show()、hide()、toggle() 関数に出会いました。そこで、これらの関数を使用して、要素の表示と非表示のケースを練習しました。

ヒント: コード内のボタンを上下に切り替えるための小さなアイコンは、このリンクのブランド表示機能画像から取得できます。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <title>hide() および toggle() 関数を使用してカメラのブランドを表示する</title>
  <スタイル タイプ="text/css">
    * {
      マージン: 0;
      パディング: 0;
    }

    体 {
      フォントサイズ: 12px;
      テキスト配置: 中央;
    }

    {
      色: #04D;
      テキスト装飾: なし;
    }

    ホバー{
      色: #F50;
      /*text-decoration 属性は、下線、上線、取り消し線など、テキストに追加される装飾を指定します。 */
      テキスト装飾: 下線;
    }

    .サブカテゴリボックス {
      幅: 600ピクセル;
      マージン: 0 自動;
      テキスト配置: 中央;
      上マージン: 40px;
    }

    .サブカテゴリボックス ul {
      リストスタイル: なし;
    }

    .サブカテゴリボックス ul li {
      表示: ブロック;
      フロート: 左;
      幅: 200ピクセル;
      行の高さ: 20px;
    }

    .showmore、.showless {
      クリア: 両方;
      テキスト配置: 中央;
      パディング上部: 10px;
    }

    .showmore a、.showless a {
      表示: ブロック;
      幅: 120ピクセル;
      マージン: 0 自動;
      行の高さ: 24px;
      境界線: 1px 実線 #AAA;
    }

    .showmore スパン {
      左パディング: 15px;
      /* 最後の 2 桁は左上隅 (0,0) からのオフセットです。最初の桁は X 軸のオフセット、つまり水平オフセットです。正は右、負は左を意味します。
       2 番目の数値は Y 軸のオフセット、つまり水平オフセットで、正は下方向、負は上方向を意味します。*/;
      背景: url(img/down.gif) 繰り返しなし 0 3px;
    }

    .showless スパン {
      左パディング: 15px;
      背景: url(img/up.gif) 繰り返しなし 0 3px;
    }

    .promoted a {
      色: #F50;
    }
  </スタイル>
  <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script type="text/javascript">
    $(関数() {
      //ページが読み込まれた後、最初にいくつかのカメラブランドを非表示にします $("ul li:gt(5):not(:last)").hide();
      // フィルター関数は、指定された式に一致する要素のセットをフィルター処理します。このメソッドは一致範囲を絞り込むために使用されます。複数の式を区切るにはコンマを使用します // ここでは、個別にスタイル設定する必要があるカメラ ブランドを除外します var multiPromoted = $("li").filter(":contains('Canon'),:contains('Sony'),:contains('Kodak')");
      // a タグバインディングクリックイベントを取得します $("div div a").click(function () {
        // カメラブランドの表示と非表示を切り替えます$("ul li:gt(5):not(:last)").toggle();
        // 一部のカメラブランドを非表示にするときに、テキスト コンテンツを置き換え、画像を上付き文字にし、li の下の a タグのテキスト スタイルを削除します if ($("ul li:gt(5):not(:last)").is(":hidden")) {
          $("a > span").html("すべてのブランドを表示");
          $("div div").removeClass();
          $("div div").addClass("showmore");
          $(multiPromoted).removeClass("プロモート済み");
        } それ以外 {
          // 一部のカメラブランドを表示する場合は、テキスト コンテンツ、上付き画像を置き換え、li$("a > span").html("Display easier brands"); の下に a タグ テキスト スタイルを追加します。
          $("div div").removeClass();
          $("div div").addClass("表示なし");
          $(multiPromoted).addClass("プロモート済み");
        }
      });
    });
  </スクリプト>
</head>
<本文>
<div class="サブカテゴリボックス">
  <ul>
    <li><a href="#">キヤノン</a><i>(3​​0440) </i></li>
    <li><a href="#">ソニー</a><i>(27220) </i></li>
    <li><a href="#">サムスン</a><i>(20808) </i></li>
    <li><a href="#">ニコン</a><i>(17821)</i></li>
    <li><a href="#">パナソニック</a><i>(12289) </i></li>
    <li><a href="#">カシオ</a><i>(8242) </i></li>
    <li><a href="#">富士</a><i>(14894)</i></li>
    <li><a href="#">コダック</a><i>(9520) </i></li>
    <li><a href="#">ペンタックス</a><i>(2195)</i></li>
    <li><a href="#">リコー</a><i>(4114) </i></li>
    <li><a href="#">オリンパス</a><i>(12205)</i></li>
    <li><a href="#">ベンキュー</a><i>(1466)</i></li>
    <li><a href="#">パトリオット</a><i>(3​​091)</i></li>
    <li><a href="#">その他のブランドカメラ</a><i>(7275) </i></li>

  </ul>
  <div class="showmore">
    <a href="#"><span>すべてのブランドを表示</span></a>
  </div>
</div>
</本文>
</html>

コード実行効果:

機能表示効果:

jQuery がカメラのブランドを表示したり非表示にしたりするために、hide() 関数とtoggle() 関数を使用する方法については、これで終わりです。jQuery がカメラのブランドを表示したり非表示にしたりするために、hide() 関数とtoggle() 関数を使用する方法についての詳細は、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JQuery での非表示、表示、切り替えの使用方法を説明する例
  • jQuery トグルの代替
  • jQuery クリックしてクラスを変更し、toggle と toggleClass() メソッドの定義と使用方法
  • jQueryはtoggleClassメソッドを使用してクラススタイルを動的に追加および削除します。
  • jQuery のホバーおよびトグル メソッドの使用ガイド
  • jQuery での show()、hide()、toggle() の使用例

<<:  MySQL デッドロックのトラブルシューティング プロセスの完全な記録

>>:  Ubuntu 16.04 で Python 3 を使用して Django プロジェクトを作成し、実行する方法

推薦する

JavaScript を使用してカルーセル効果を実装する

この記事では、カルーセルマップの特殊効果を実現するためのJavaScriptの具体的なコードを参考ま...

Windows Server 2016 でサービスを展開する方法 (グラフィック チュートリアル)

導入インストールするシステムの数が多い場合、USB フラッシュ ドライブまたは CD を使用した手動...

PostgreSQL マテリアライズドビュープロセス分析

この記事は主にPostgreSQLマテリアライズドビューのプロセス分析について紹介します。サンプルコ...

MySQL の 4 つのトランザクション分離レベルの詳細な説明

この実験のテスト環境: Windows 10+cmd+MySQL5.6.36+InnoDB 1. ト...

Vueは動的コンポーネントを使用してTAB切り替え効果を実現します

目次問題の説明Vueの動的コンポーネントとはアプリケーションシナリオの説明実装手順ステップ 1 (新...

IE5.0以降のHTCコンポーネントの定義の概要

Microsoft IE 5.0 がリリースされる前は、Web プログラミングにおける最大の課題は、...

vite を使用して vue3 アプリケーションを構築する方法

1. インストールヒント: 現在、VUE3.0 の公式翻訳ドキュメントはありません。しかし、すでに誰...

SQL グループ化により重複を削除し、他のフィールドで並べ替える

必要:あるフィールドの同一項目を結合し、別の時間フィールドで並べ替えます。例:初めに テーブルから都...

Navicat 経由で MySQL にリモート接続する方法

Navicat を使用して IP 経由で直接接続すると、次のようなさまざまなエラーが報告されます: ...

html5 の新しいメソッドを使用して JavaScript で要素クラス名を操作する方法の詳細な説明

目次1. classList属性2. 実用化以前の JavaScript では、最初にクラス属性を取...

Pure CSS と Flutter はそれぞれブリージング ライト効果を実現します (サンプル コード)

前回、非常に熱心なファンから、月を呼吸する光の効果にできるかどうか尋ねられました。月の大きさの写真が...

Vue の計算プロパティの詳細な説明

目次補間式方法計算された要約する今日は、Vue の計算プロパティについてお話ししましょう。計算プロパ...

Hyper-V インストール CentOS 8 の問題の分析

CentOS 8 がリリースされてから随分経ちました。Linux 仮想マシンをいじっている人間として...

MySQL 8.0 アトミック DDL 構文の詳細な説明

目次01 アトミックDDLの紹介02 一部のDDL操作の実行動作の変更03 DDL 操作のログを表示...

Antdesign-vueとsortablejsを組み合わせて、2つのテーブルをドラッグして並べ替える機能を実現

目次成果を達成するsortablejs の紹介具体的な実装成果を達成する最初は、antdesign ...