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 プロジェクトを作成し、実行する方法

推薦する

TomcatコンポーネントはWebサーバーのアーキテクチャの進化を示しています

1. tomcat とは誰ですか? 2. Tomcat は何ができますか? Tomcat は Web...

シェルスクリプトを使用したMySQLデータベースの自動バックアップ

シェルスクリプトを使用したMySQLデータベースの自動バックアップデータベースを頻繁にバックアップす...

JS を使用してデータ型を決定する 4 つの方法

目次序文1. 型2. インスタンス3. コンストラクター詳細: 4. 文字列要約する序文Javasc...

Nginx でバージョン番号と Web ページのキャッシュ時間を非表示にする方法

Nginx の最適化 - バージョン番号と Web ページのキャッシュ時間を非表示にするバージョン番...

CSS3 変換によって子要素の固定位置を絶対位置に変更する方法

この記事では、CSS3 の transform を使用して子要素の固定配置を絶対配置に変更する方法を...

IIS 7.5では、HTMLはSHTMLのようなinclude関数(モジュールマッピングの追加)をサポートします。

最初はたくさんのエラーを見つけましたが、実際には非常に簡単です。shtm の元の設定を参照するだけで...

MySQLをインストールして設定し、ルートパスワードを変更する方法

1. インストールapt-get install mysql-server にはアカウントとパスワー...

Linux に nodejs 環境とパス構成をインストールするための詳細な手順

Linux に Node.js をインストールする方法は 2 つあります。1 つは簡単で、解凍して使...

MySQL 変数宣言とストアド プロシージャの分析

変数の宣言グローバル変数の設定@a='新しい変数' を設定します。関数やストアドプロ...

Linux システムのパフォーマンスを分析するための top コマンドの詳細な説明

Linux topコマンドの紹介top コマンドは、Linux でよく使用されるパフォーマンス分析ツ...

SSHを使用してDockerサーバーに接続する方法

初めて docker に触れたときは本当に戸惑いました。初心者向けのチュートリアルを長い間読みました...

MySQL ページングパフォーマンスの調査

一般的なページング方法: 1. エスカレーター方式エスカレーター方式では通常、前のページ/次のページ...

XHTML 入門チュートリアル: フォーム タグ

<br />フォームはユーザーが情報を送信するための重要なチャネルです。このセクションで...

jsはテーブルドラッグオプションを実装します

この記事の例では、テーブルドラッグオプションを実装するためのjsの具体的なコードを参考までに共有して...

Tomcat をサービスとして登録する際に注意すべき点のまとめ

Tomcat をサービスとして登録する場合の注意点は次のとおりです。 インターフェースを開いたら、以...