ホームページ  >  記事  >  ウェブフロントエンド  >  HTMLでリストを非表示にする方法

HTMLでリストを非表示にする方法

藏色散人
藏色散人オリジナル
2021-05-18 11:50:534483ブラウズ

htmlリストを非表示にする方法: まず、対応する HTML ファイルを開き、次に jQuery の toggle メソッドを使用し、矢印に onclick メソッドを追加してリストを非表示にします。

HTMLでリストを非表示にする方法

#この記事の動作環境: Windows7 システム、HTML5 バージョン、DELL G3 コンピューター

htmlリストの表示と非表示について

達成される効果は次のとおりです。


HTMLでリストを非表示にする方法 下矢印をクリックしてリストを非表示にします。

HTMLでリストを非表示にする方法 上向き矢印をクリックすると一覧が表示されます
主な用途はjQueryのtoggleメソッドと、矢印の表示・非表示の判定、そして矢印にonclickメソッドを追加することです。
具体的な実装機能 方法は以下の通りです。

var toggleFlag = false;
      function toggleHosptial(e){
          if(!toggleFlag){
              $('.arrow_icon').css({'background-image':'url(' + "../images/arrow_up.png" + ')'})
          }else{
            $('.arrow_icon').css({'background-image':'url(' + "../images/arrow_down.png" + ')'})
          }
        var sibling = e.parentNode.parentNode.children[1];
        $(sibling).toggle();
        toggleFlag = !toggleFlag;
      }

バグがあるため、バグ解決は次回のブログで行います。

以上がHTMLでリストを非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。