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>(30440) </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>(3091)</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 をよろしくお願いいたします。

以下もご興味があるかもしれません: