30DAYSトライアル お勉強

デイトラ中級編DAY5 jQuery 実践課題①

30DAYSトライアル

デイトラもいよいよ中級編に突入です!

DAY5の課題はすぐにできるかな、と思ったのですが詰まりましたね(笑)
でも気づけばとっても簡単な修正で解決。
忘れないようにメモメモ。

アコーディオンメニューが対象要素の下にぶら下がらない

クリックしたときにメニューが出てくるようになったのですが、「コース一覧」の下にキレイに表示されません。

ソースもどこが間違っているのかわからず苦戦。
動きは出来てるからHTMLかな、と思い調べていくとリストの表示がうまくいっていませんでした。

<li id ="toggle" class="header-nav-item"><a href="#">コース一覧</a></li>
            <ul class="drawer-list">
              <li><a href="">初級</a></li>
              <li><a href="">中級</a></li>
              <li><a href="">上級</a></li>
            </ul>

元々アコーディオンメニューを付けるつもりがなかったのですが、今回は中のulリストも含めて「コース一覧」として扱うため</li>を「drawer-list」の後ろに書いてあげないといけなかったんですね。

正しくはこう!↓

          <li id ="toggle" class="header-nav-item"><a href="#">コース一覧</a>
            <ul class="drawer-list">
              <li><a href="">初級</a></li>
              <li><a href="">中級</a></li>
              <li><a href="">上級</a></li>
            </ul>
          </li>

CSSちょこっと整えて無事に完成いたしました!

jQueryでトップページへ戻る

こちらはあまり詰まらずできました。
検索で探すとわかりやすく解説してあるサイトに当たりました。

-30DAYSトライアル, お勉強

© 2021 文系女子とプログラミング