jQuerytoggleメニューClass追加で表示を変更

Posted on by

jQueryでtoggleメニュー作成

「jquery」でクリックした時に表示する方法をのご紹介!!

「jquery.js」をダウンロード致します。
ダウンロード先

jRumble をダウンロード
ダウンロード先

HTMLを記載

下記のソースを追加してください。

 

    
ここをクリック

    
クリックして表示される内容

    
ここをクリック

    
クリックして表示される内容

Cssを記載

下記のソースを追加してください。

dl#sampletoggle dt { background:url("http://teach.web-represent.link/wp-content/uploads/2019/02/sampledown.png") left center no-repeat;padding-left:20px }
dl#sampletoggle  dt.active { background:url("http://teach.web-represent.link/wp-content/uploads/2019/02/sampleup.png") left center no-repeat;padding-left:20px }
dl#sampletoggle  dd { display:none; }

Javascriptを記載

下記のソースを追加してください。
※読み込みのcssはサンプルのリンク先を参照してください。


サンプル

下記のソースをお使いください。
表示サンプルを掲載いたします。

サンプルはこちら：toggleメニューサンプル

参考サイト：wryoku