JQuery
開閉するナビゲーションメニュー| Navigation menu that opens and closes
解説
「 $(document).ready(function(){ 」 → HTMLが読み込まれたら、functionの｛～｝の処理をするという意味になります。| When HTML is loaded, it means to process {~} of function.
「 $('.submenu h3').on('click',function(){ 」 → .submenuのh3がクリックされたら・・・という意味。| It means when h3 of .submenu is clicked.
「 $(this).next().toggleClass('hidden') 」 → このthisは「イベントが発生した要素」を指します。ここではh3を指します。nextではすぐ次の弟要素を取得します。ここではulを指します。そして取得したulに対してtoggleClassメソッドを実行します。toggleClassメソッドは、取得した要素に（）内のパラメータで指定されているクラス名がついていなければ追加、ついていれば削除します。| This this refers to the "element where the event occurred". Here it refers to h3. next gets the next younger brother element immediately. Here it refers to ul. Then execute the toggleClass method on the obtained ul. The toggleClass method adds if the acquired element does not have the class name specified by the parameter in (), and deletes it if it does.
hiddenクラスが追加されたり削除されたりします。CSSで書いておいた「.hidden」のルールが適用されたり、されなかったりして、サブメニューの表示・非表示が切り替わります。| Hidden classes are added or removed. Depending on whether the ".hidden" rule written in CSS is applied or not, the submenu is displayed / hidden.
表示・非表示を切り替えるには、ulに適用されるCSSのdisplayプロパティをblockにしたりnoneにしたりすれば実装できます。| To switch between display and non-display, you can implement it by setting the display property of the CSS applied to ul to block or none.
この本を参考にして学び、完成させることができました。しかし、ここではプログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）
その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^)、実際、初心者の私でもわかりやすかったです。身に付け消えないスキルが3,000円弱ならコスパよく、買っておいてよかったと満足してます。
もっと深く学びたい人にはこちらもどうぞ。| For those who want to learn more deeply, this is also recommended.
キャリアアップに必要なスキルを取得しよう。| Get the skills you need to advance your career.
オンラインで受講ができるスクールですので、全国どこからでも。 | Since it is a school where you can take classes online, you can take it from anywhere in the country.
ぺージの先頭に戻る(Return to top of page)
©2020年9月 Challenge programming