Submit Search
Upload
クリックで開閉する
•
Download as PPTX, PDF
•
0 likes
•
411 views
S
sayoko miura
Follow
開閉式のメニュー
Read less
Read more
Internet
Report
Share
Report
Share
1 of 9
Download now
Recommended
miuratta-standard.pdf
miuratta-standard.pdf
sayoko miura
スタンダード検定のコツ
group-html
group-html
sayoko miura
骨組みのHTML
html
html
sayoko miura
主なHTML
Table
Table
sayoko miura
table,html
Child.key
Child.key
sayoko miura
jQuery 子要素の取得
Clearfix.key
Clearfix.key
sayoko miura
float,css
Form
Form
sayoko miura
HTML5でお問い合わせフォームを作ろう
Css selector
Css selector
sayoko miura
id,classの使い方
Recommended
miuratta-standard.pdf
miuratta-standard.pdf
sayoko miura
スタンダード検定のコツ
group-html
group-html
sayoko miura
骨組みのHTML
html
html
sayoko miura
主なHTML
Table
Table
sayoko miura
table,html
Child.key
Child.key
sayoko miura
jQuery 子要素の取得
Clearfix.key
Clearfix.key
sayoko miura
float,css
Form
Form
sayoko miura
HTML5でお問い合わせフォームを作ろう
Css selector
Css selector
sayoko miura
id,classの使い方
Prevnext
Prevnext
sayoko miura
要素指定
J query place
J query place
sayoko miura
jQueryの記述場所
This
This
sayoko miura
jQueryイベントとthis
Event.key
Event.key
sayoko miura
jQueryのイベントとは
Readyevent
Readyevent
sayoko miura
jQueryのレディイベント
J query element.key
J query element.key
sayoko miura
jQueryの基本的な書き方
J query ready2.key
J query ready2.key
sayoko miura
jQueryを使う最初にすること2
WhatsjQuery
WhatsjQuery
sayoko miura
jQuery初めての人向け
Form
Form
sayoko miura
HTML-formの書き方
Web2 mission
Web2 mission
sayoko miura
提出の約束
Html
Html
sayoko miura
いろいろなHTML
Table
Table
sayoko miura
HTML/tableの使い方
Display
Display
sayoko miura
ブロックレベル要素とインライン要素
上へ戻る
上へ戻る
sayoko miura
少しスクロールしたら上へ戻るボタンが現れ、クリックするとゆっくり上へ戻り、ボタンが消える動きを実装します
form
form
sayoko miura
お問い合わせフォームを作ろう
Time datetime
Time datetime
sayoko miura
Time datetime
ぶら下げインデント
ぶら下げインデント
sayoko miura
ぶら下げインデント
CSSスプライト
CSSスプライト
sayoko miura
CSSスプライトの使い方
JQueryプラグイン
JQueryプラグイン
sayoko miura
JQueryプラグインの使い方
Figure
Figure
sayoko miura
図にタイトルやキャプションをつける
More Related Content
More from sayoko miura
Prevnext
Prevnext
sayoko miura
要素指定
J query place
J query place
sayoko miura
jQueryの記述場所
This
This
sayoko miura
jQueryイベントとthis
Event.key
Event.key
sayoko miura
jQueryのイベントとは
Readyevent
Readyevent
sayoko miura
jQueryのレディイベント
J query element.key
J query element.key
sayoko miura
jQueryの基本的な書き方
J query ready2.key
J query ready2.key
sayoko miura
jQueryを使う最初にすること2
WhatsjQuery
WhatsjQuery
sayoko miura
jQuery初めての人向け
Form
Form
sayoko miura
HTML-formの書き方
Web2 mission
Web2 mission
sayoko miura
提出の約束
Html
Html
sayoko miura
いろいろなHTML
Table
Table
sayoko miura
HTML/tableの使い方
Display
Display
sayoko miura
ブロックレベル要素とインライン要素
上へ戻る
上へ戻る
sayoko miura
少しスクロールしたら上へ戻るボタンが現れ、クリックするとゆっくり上へ戻り、ボタンが消える動きを実装します
form
form
sayoko miura
お問い合わせフォームを作ろう
Time datetime
Time datetime
sayoko miura
Time datetime
ぶら下げインデント
ぶら下げインデント
sayoko miura
ぶら下げインデント
CSSスプライト
CSSスプライト
sayoko miura
CSSスプライトの使い方
JQueryプラグイン
JQueryプラグイン
sayoko miura
JQueryプラグインの使い方
Figure
Figure
sayoko miura
図にタイトルやキャプションをつける
More from sayoko miura
(20)
Prevnext
Prevnext
J query place
J query place
This
This
Event.key
Event.key
Readyevent
Readyevent
J query element.key
J query element.key
J query ready2.key
J query ready2.key
WhatsjQuery
WhatsjQuery
Form
Form
Web2 mission
Web2 mission
Html
Html
Table
Table
Display
Display
上へ戻る
上へ戻る
form
form
Time datetime
Time datetime
ぶら下げインデント
ぶら下げインデント
CSSスプライト
CSSスプライト
JQueryプラグイン
JQueryプラグイン
Figure
Figure
クリックで開閉する
1.
『見出しをクリックすると内容が開閉する』 (1)まず、HTMLで「内容」が開いた状態を作成する。 (2)CSSで「内容」が閉じた状態を作成する。 (3)jQueryで内容が開閉するようにする。
2.
<section class="submenu"> <h3>見出しをクリックすると内容が開閉する</h3> <ul class="hidden"> <li>クリックした見出しだけクリック毎に内容が開閉する</li> </ul> </section> .hidden{ display:
none; } (1)まず、HTMLで「内容」が開いた状態を作成する。 (2)CSSで「内容」が閉じた状態を作成する。 「内容」 「見出し」
3.
toggleClass(class) 指定したcssクラスが 要素になければ追加し、 あれば削除する。 toggleClass('hidden')
4.
(3)jQueryで内容が開閉するようにする。 class=“submenu” の<h3> をクリックされた時に を適用したり外したりする 非表示
表示する <ul class=“hidden”>のクラスhiddenをつけたり外したりする .hidden{ display: none; } ⇨ 表示・非表示するようにする
5.
(3)jQueryで内容が開閉するようにする。 $(‘.submenu h3').click(function(){ //ここに処理を書く });
6.
(3)jQueryで内容が開閉するようにする。 $(’.submenu h3').click(function(){ $(this).next().toggleClass('hidden'); });
7.
別のやり方
8.
slideToggle() slideDown、slideUpの動作を交互に行います
9.
$(’.submenu h3').click(function(){ $(this).next().slideToggle(); }); slideToggle(‘slow’) slideToggle(‘fast’) slideToggle(1500) ゆっくり 速く 1.5秒かけて動く slideToggle() 初期値
‘normal’
Download now