質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

1回答

1022閲覧

JqueryからJavaScriptへの置き換えで分からない箇所がある

HIroki

総合スコア2

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

2クリップ

投稿2022/11/17 06:51

前提

Jqueryで書かれている、多階層のハンバーガーメニューをJsに書き換える練習をしています。
途中までは、上手くいったのですがいくつかの点で躓きました。
1aタグから見た親要素の取得(荒業ですが、クラスを別にして回避しています)
2.toggleなどのclassを取得し、追加または削除する部分のやり方がイマイチ摘めません。

実現したいこと

Jsに書き換えられなかった箇所を、書き換えて正しく動作させたい。

該当のソースコード

HTML

1 <div class="hamburger__btn"><span></span><span></span><span></span></div> 2 <nav class="nav not--svh"> 3 <div class="nav__list--scroll"> 4 <ul class="nav__list"> 5 <li class="nav__item"><a href="index.html">HOME</a></li> 6 <li class="has-child nav__item js1"><a href="#">menu1</a> 7 <ul class="nav__item-child"> 8 <li class="nav__item-child--item"><a href="/Publish/tm/index.html">内容</a></li> 9 </ul> 10 </li> 11 <li class="has-child nav__item js2"><a href="#">menu2</a> 12 <ul class="nav__item-child"> 13 <li class="nav__item-child--item"><a href="/Publish/mm/index.html">介</a></li> 14 </ul> 15 </li> 16 <li class="has-child nav__item js3"><a href="#">menu3</a> 17 <ul class="nav__item-child"> 18 <li class="nav__item-child--item"><a href="/Publish/campus/index.html">キャンパス</a></li> 19 </ul> 20 </li> 21 <li class="nav__item"><a href="/Publish/question.html">よくある質問</a></li> 22 </ul> 23 </div> 24 </nav>

Jquery

1function mediaQueriesWin() { 2 var width = $(window).width(); 3 if (width <= 1025) { 4 $(".has-child>a").off('click'); 5 $(".has-child>a").on('click', function () { 6 var parentElem = $(this).parent(); 7 $(parentElem).toggleClass('active'); 8 $(parentElem).children('ul').stop().slideToggle(500); 9 return false; 10 }); 11 } else { 12 $(".has-child>a").off('click'); 13 $(".has-child>a").removeClass('active'); 14 $('.has-child').children('ul').css("display", ""); 15 16 } 17} 18

JavaScript

1window.addEventListener('load', function () { 2 const width = window.innerWidth; 3 if (width <= 900) { 4 document.querySelector(".has-child>a").onclick = function () { 5 funcList.forEach(function (pair) { 6 pair.el.removeEventListener('click', pair.clickFunc, false); 7 }); 8 } 9 10 // $(".has-child>a").off('click'); //has-childクラスがついたaタグのonイベントを複数登録を避ける為offにして一旦初期状態へ 11 document.querySelector('.js1>a').addEventListener('click', function () { 12 const parentElem1 = document.querySelectorAll('.js1'); 13 parentElem1.classList.toggle("active") 14 // $(parentElem1).toggleClass('active'); 15 $(parentElem1).children('ul').stop().slideToggle(500);//liの子要素のスライドを開閉させる※数字が大きくなるほどゆっくり開く 16 }, 17 false); 18 19 20 document.querySelector('.js2>a').addEventListener('click', function () { 21 const parentElem2 = document.querySelectorAll('.js2'); 22 // var parentElem = $(this).parent();// aタグから見た親要素の<li>を取得し 23 $(parentElem2).toggleClass('active');//矢印方向を変えるためのクラス名を付与して 24 $(parentElem2).children('ul').stop().slideToggle(500);//liの子要素のスライドを開閉させる※数字が大きくなるほどゆっくり開く 25 }, 26 false); 27 28 29 document.querySelector('.js3>a').addEventListener('click', function () { 30 const parentElem3 = document.querySelectorAll('.js3'); 31 // var parentElem = $(this).parent();// aタグから見た親要素の<li>を取得し 32 $(parentElem3).toggleClass('active');//矢印方向を変えるためのクラス名を付与して 33 $(parentElem3).children('ul').stop().slideToggle(500);//liの子要素のスライドを開閉させる※数字が大きくなるほどゆっくり開く 34 }, 35 false); 36 } else {//横幅が960px以上の場合 37 $(".has-child>a").off('click');//has-childクラスがついたaタグのonイベントをoff(無効)にし 38 $(".has-child>a").removeClass('active');//activeクラスを削除 39 $('.has-child').children('ul').css("display", "");//スライドトグルで動作したdisplayも無効化にする 40 } 41});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

1aタグから見た親要素の取得(荒業ですが、クラスを別にして回避しています)

この場合 this.parentNode でいいでしょう。

2.toggleなどのclassを取得し、追加または削除する部分のやり方がイマイチ摘めません。

既にできているように、.classList のメソッドでやればいいと思います。

slideToggle() の置き換えはシンプルではないので、時間があれば後で追記します。


slideToggle() は jQuery でも数百行のコードで実現しているぐらい面倒な処理です。限られた場面だけの対応(margin/border/padding なしなど)でよいなら、以下のようなコードで実現できます。

js

1async function slideToggle(e, duration) { 2 const display = getComputedStyle(e).display; 3 if (display == 'none') { 4 e.style.display = ''; 5 e.style.overflow = 'hidden'; 6 let targetHeight = e.scrollHeight; 7 let a = e.animate([{height:'0px'}, {height:targetHeight+'px'}], duration); 8 a.play(); 9 await a.finished; 10 e.style.height = ''; 11 e.style.overflow = ''; 12 } else { 13 e.style.overflow = 'hidden'; 14 let targetHeight = e.scrollHeight; 15 let a = e.animate([{height:targetHeight+'px'}, {height:'0px'}], duration); 16 a.play(); 17 await a.finished; 18 e.style.display = 'none'; 19 e.style.overflow = ''; 20 } 21}

投稿2022/11/17 09:33

編集2022/11/17 23:44
int32_t

総合スコア20659

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問