jquery

Question

jquery でレスポンシブなメニューを勉強しています。
下記のURLを参考に作ってみたのですが、この場合のjqueryって（HTML要素の）表示の切り替えをしているのですよね？
簡単ではないでしょうが手作業で　ライブラリ　を使わずできますか？
またどのようにすればよいでしょうか？
https://rico-notes.com/programming/html/header-responsive/

sukitaro · Accepted Answer

一般的に、jqueryをvanilla js（ライブラリを使わない、素のJavaScript）に置き換える方法は、このページが役に立ちます。

参考：https://qiita.com/nightyknite/items/668c112c40931515ed67

$(function() {
      const hum = $('#hamburger, .close')
      const nav = $('.sp-nav')
      hum.on('click', function(){
         nav.toggleClass('toggle');
      });
   });

これを書き換えるなら、

$(function() {   });
は、
document.addEventListener("DOMContentLoaded", function(){ });
に置き換えられます。

$('#とか.で始まるセレクター')
は、
document.querySelector('セレクター')
に置き換えられます。
※ただし、今回の#hamburger, .closeは2つあるので、よく分かりませんでした。変数が増えるのは嫌ですが、hamとcloの2つにしました。

.on
は、
.addEventListener
に置き換えられます。

.toggleClass
は、
.classList.toggle
に置き換えられます。

結果、こうなりました。
    document.addEventListener("DOMContentLoaded", function () {
      const hum = document.querySelector('#hamburger');
      const clo = document.querySelector('.close');
      const nav = document.querySelector('.sp-nav');
      hum.addEventListener('click', function () {
        nav.classList.toggle('toggle');
      },false);
      clo.addEventListener('click', function () {
        nav.classList.toggle('toggle');
      },false);
    });

No1さんのようなエレガントさはありませんが、多少意味が分かりやすくなっているのではないかと思います。

fujillin · Answer

こんばんは

＞この場合のjqueryって（HTML要素の）表示の切り替えをしているのですよね？
ざっとしか見ていませんが、「.sp-nav」の要素にクラスを付けたり外したりしているだけです。
ですので、これだけのためにわざわざjQueryを利用するのも…って程度かな。

＞ライブラリ　を使わずできますか？
記述は少しだけ長くなりますが、jQueryを読み込むことを考えれば遥かに短くなります。
元の仕組みがちょっと面倒な仕組みになっていますけれど、とりあえずそのままにするなら・・・
window.addEventListener('DOMContentLoaded', e => {
const EL = s => document.querySelector(s);
[ EL('#hamburger'), EL('.close') ].forEach( elm => {
elm.addEventListener('click', e => {
EL('.sp-nav').classList.toggle('toggle');
});
});
});

※ bodyの閉じタグの前に記述するようにすれば、外側の1行ずつは不要です。

…ってか、CSS3なら、スクリプトなど使わなくても同様のことは実現可能でしょう。
非表示のチェックボックスを用意しておいて、クリック対象要素をこのチェックボックスのlabel要素にしておくと、クリックすることでチェック状態がトグルになります。
表示制御のCSS側では、クラスの有無ではなく、チェックの有無で検出して表示状態を変えるようにすれば、スクリプトなしでも同じことが実現できます。

jquery

一般的に、jqueryをvanilla js（ライブラリを使わない、素のJavaScript）に置き換える方法は、このページが役に立ちます。

こんばんは

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング