jQueryはHTML要素の非表示と表示を実装します

商品を検索するときに、すべてのブランドまたは一部のブランドを表示するTaobaoの機能を真似してみましょう。

まず、考えを整理してみましょう。

1. まず最初に、隠す必要がある要素を隠します

2. 表示開始時に非表示にする必要がある要素オブジェクトを取得するには、jQueryを使用する必要があります。

3. クリックイベントをトリガーできるボタンまたはリンクをページ上に記述し、jQueryを使用してこのボタンまたはリンクにクリックイベントを追加します。

4. ボタンがクリックされたら、非表示にするオブジェクトが現在非表示になっているかどうかの値を取得します。

5. 隠れている場合は見えるようにし、隠れていない場合は隠れるようにします。

コードを見てみましょう:

<html xmlns="http://www.w3.org/1999/xhtml">
 <ヘッド>
 <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
 <タイトル></タイトル>
  <スタイル タイプ="text/css">
  <!-- ここに CSS があります。好みに応じて調整できます。これは重要なスタイルではありません -->
   *{ マージン:0; パディング:0;}
   本文 {フォントサイズ:12px;テキスト配置:center;}
   { 色:#04D; テキスト装飾:なし;}
   a:hover { color:#F50; テキスト装飾:下線;}
   .SubCategoryBox {幅:600px; マージン:0 自動; テキスト配置:中央; 上マージン:40px;}
   .SubCategoryBox ul { リストスタイル:なし;}
   .SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;}
   .showmore { クリア:both; テキスト配置:center; パディングトップ:10px; }
   .showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}
   
   .showmore span { padding-left:15px; background:url(img/down.gif) no-repeat 0 0;}
   
   .promoted a { color:#F50;}
  </スタイル>
  <script type="text/javascript" src="scripts/jquery-1.7.2.js"></script><!-- jQuery ファイルをインポート -->
  <script type="text/javascript">
 
   $(関数(){
    : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
     return false;//最後に、false を返します。なぜ false を返すのでしょうか? これは、リンクがジャンプしたり、フォーム ボタンが送信されたりするのを防ぐためです。そうしないと、別のページにジャンプしてしまいます。
    })
   
   });
  </スクリプト>
 </head>
 <本文>
  <div class="サブカテゴリボックス">
   <ul>
    <li><a href="#" >C</a></li>
    <li><a href="#" >C++</a></li>
    <li><a href="#" >C#</a></li>
    <li><a href="#" >Java</a></li>
    <li><a href="#" >JAVASCRIPT</a></li>
    <li><a href="#" >Python</a></li>
    <li><a href="#" >PHP</a></li>
    <li><a href="#" >進む</a></li>
    <li><a href="#" >スイフト</a></li>
    <li><a href="#" >ルビー</a></li>
    <li><a href="#" >HTML</a></li>
    <li ><a href="#" >アセンブリ</a></li>
    <li><a href="#" >PERL</a></li>
    <li ><a href="#" >その他のプログラミング言語</a></li>
   </ul>
   <div class="showmore">
    <a href="more.html" ><span>すべての言語を表示</span></a><!-- ここにリンクがありますが、クリックしてもリダイレクトされません。上記はfalseを返すため -->
   </div>
  </div>
 </本文>
</html>

最初はこのように開きます。