最近、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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL デッドロックのトラブルシューティング プロセスの完全な記録
>>: Ubuntu 16.04 で Python 3 を使用して Django プロジェクトを作成し、実行する方法
1. tomcat とは誰ですか? 2. Tomcat は何ができますか? Tomcat は Web...
シェルスクリプトを使用したMySQLデータベースの自動バックアップデータベースを頻繁にバックアップす...
目次序文1. 型2. インスタンス3. コンストラクター詳細: 4. 文字列要約する序文Javasc...
Nginx の最適化 - バージョン番号と Web ページのキャッシュ時間を非表示にするバージョン番...
この記事では、CSS3 の transform を使用して子要素の固定配置を絶対配置に変更する方法を...
最初はたくさんのエラーを見つけましたが、実際には非常に簡単です。shtm の元の設定を参照するだけで...
1. インストールapt-get install mysql-server にはアカウントとパスワー...
Linux に Node.js をインストールする方法は 2 つあります。1 つは簡単で、解凍して使...
変数の宣言グローバル変数の設定@a='新しい変数' を設定します。関数やストアドプロ...
Linux topコマンドの紹介top コマンドは、Linux でよく使用されるパフォーマンス分析ツ...
初めて docker に触れたときは本当に戸惑いました。初心者向けのチュートリアルを長い間読みました...
一般的なページング方法: 1. エスカレーター方式エスカレーター方式では通常、前のページ/次のページ...
<br />フォームはユーザーが情報を送信するための重要なチャネルです。このセクションで...
この記事の例では、テーブルドラッグオプションを実装するためのjsの具体的なコードを参考までに共有して...
Tomcat をサービスとして登録する場合の注意点は次のとおりです。 インターフェースを開いたら、以...