HTMLでリストを非表示にする方法-フロントエンドQ&A-php.cn

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

藏色散人

リリース： 2023-01-06 11:13:48

オリジナル

4354 人が閲覧しました

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

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

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

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 サイトの他の関連記事を参照してください。