JQueryを使った開閉するナビゲーションメニューついて

開閉するナビゲーションメニュー| Navigation menu that opens and closes

HTML <section>
<div class=”slide”>
<div class=”submenu”>
<h3>Favorite BAND </h3>
<ul class=”hidden”>
<li>BON JOVI</li>
<li>Mr.BIG</li>
<li>DREAM THEATER</li>
<li>ZENO</li>
</ul>
</div>
<div class=”submenu”>
<h3>Favorite food</h3>
<ul class=”hidden”>
<li>Sushi</li>
<li>Sukiyaki </li>
<li>yakisoba </li>
<li>Tempura </li>
</ul>
</div>
</div>
</section>

CSS .submenu h3 {
margin: 0 0 1em 0;
font-size: 18px;
cursor: pointer;
}
.submenu h3:hover {
color: #b04188;
text-decoration: underline;
}
.submenu ul {
margin: 0 0 1em 0;
list-style-type: none;
font-size: 14px;
}
.hidden {
display: none;
}

JavaScript <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(‘.submenu h3’).on(‘click’,function(){
$(this).next().toggleClass(‘hidden’)
});
});
</script>

Favorite BAND

Favorite food

解説

「 $(document).ready(function(){　」 →　HTMLが読み込まれたら、functionの｛～｝の処理をするという意味になります。

「 $(‘.submenu h3’).on(‘click’,function(){　」　→　.submenuのh3がクリックされたら・・・という意味。

「 $(this).next().toggleClass(‘hidden’)　」　→　このthisは「イベントが発生した要素」を指します。ここではh3を指します。nextではすぐ次の弟要素を取得します。ここではulを指します。そして取得したulに対してtoggleClassメソッドを実行します。toggleClassメソッドは、取得した要素に（）内のパラメータで指定されているクラス名がついていなければ追加、ついていれば削除します。

hiddenクラスが追加されたり削除されたりします。CSSで書いておいた「.hidden」のルールが適用されたり、されなかったりして、サブメニューの表示・非表示が切り替わります。

表示・非表示を切り替えるには、ulに適用されるCSSのdisplayプロパティをblockにしたりnoneにしたりすれば実装できます。

この本から引用、参考にして学び、完成させることができました。しかし、ここではプログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）
その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^)、実際、初心者の私でもわかりやすかったです。身に付け消えないスキルが3,000円弱ならコスパよく、買っておいてよかったと満足してます。

わからないことはプロフェッショナルから学ぶのが一番

キャリアアップに必要なスキルを取得しよう。

オンラインで受講ができるスクールですので、全国どこからでも。