0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【js】ハンバーガーメニューでうまくいかんかったやつ

Last updated at Posted at 2021-10-04

自分用メモ

ハンバーガーメニューの表示非表示に下記のコードを入れてた。
けど、PCで普通のメニューが表示されてる状態からウィンドウ幅をうにうにするとハンバーガーボタンが出てるのに押せない。

だめ.js
$(window).on("load", function() {
    var w = $(window).width();
    var x = 1024;
    if (w <= x) { //1024px以下
       
$(function(){
	console.debug('ハンバーガー開始');
	$('.ハンバーガーボタン').click(function(){
	$('.ハンバーガーメニュー,.ハンバーガーボタン,body').toggleClass('f_js-open'); 
	});
	console.debug('ハンバーガー終わり');
    });
    } else { //1024px以上
	console.debug('PCでちゅわ');
    }
});

修正したやつ。$(window).on("load", function() {もいらないかも。
jsはページ読み込んだ時にだけ読まれるから、ウィンドウ幅変わっても横幅取得しなくてずっと「PCでちゅわ」になってるんだべと先輩に教えてもらいました。
CSSと同じとおもったらだめだべ雑魚まんじゅう〜。

いい.js
$(window).on("load", function() {
    // var w = $(window).width();
    // var x = 1024;
    // if (w <= x) { //1024px以下
       
$(function(){
	console.debug('ハンバーガー開始');
	$('.ハンバーガーボタン').click(function(){
	$('..ハンバーガーメニュー,.ハンバーガーボタン,body').toggleClass('f_js-open'); 
	});
	console.debug('ハンバーガー終わり');
    });
 //    } else { //1024px以上
	// console.debug('PCでちゅわ');
 //    }
});
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?