同一ページ内にスクロール移動するときにハンバーガーメニューをクリックしたら閉じさせようとしています。以下のようにしてみましたが、リンク先の「E」を選択してもスクロール移動するだけで、メニューが閉じません。何か抜けてる箇所などあるようでしたら教えてください。その他、必要な情報がありましたら教えてください。 MENU A B C D E $(window).load(function() { $(".menu li a").click(function(event) { $(".nav-container").hide(); }); $(".bottom-menu-content").click(function(event) { $(".nav-container").show(); }); }); どうぞよろしくお願いいたします。

おしえて

同一ページ移動時ハンバーガーメニューをクリックしたら閉じたい

解決済

質問者：apricot1101
質問日時：2021/07/16 13:20
回答数：4件

同一ページ内にスクロール移動するときにハンバーガーメニューをクリックしたら閉じさせようとしています。以下のようにしてみましたが、リンク先の「E」を選択してもスクロール移動するだけで、メニューが閉じません。何か抜けてる箇所などあるようでしたら教えてください。
その他、必要な情報がありましたら教えてください。

<div class="bottom-menu-content">
　<input type="checkbox" id="nav" />
　　<label for="nav" class="menu-bar"></label>
　　<label for="nav" class="toggle-label">MENU</label>
<nav class="nav-container">
<div class="wrapper">
<ul class="menu">
<li><a href="a.html" class="link-nav">A</a></li>
<li><a href="b.html" class="link-nav">B</a></li>
<li><a href="c.html" class="link-nav">C</a></li>
<li><a href="d.html" class="link-nav">D</a></li>
<li><a href="#e" class="scroll link-nav">E</a></li>
</ul>
</div>
</nav>
</div>

<script src="assets/js/jquery-3.3.1.min.js"></script>
<script>
$(window).load(function() {
$(".menu li a").click(function(event) {
　　　　　 $(".nav-container").hide();
　　　 });
$(".bottom-menu-content").click(function(event) {
　　　　　 $(".nav-container").show();
　　　 });
});
</script>

どうぞよろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

参考程度に

No.4ベストアンサー

回答者： fujillin
回答日時：2021/07/19 16:32

No3です

＞今は「#e」をクリックしたときはバッテンのままとなっています。
「ハンバーガーメニュー」とおっしゃっていますけれど、未だにどこがハンバーグなのか不明です。
仕組みがどうなっているかの情報を示さずに質問されても、それは質問者様にしかわからないことです。

方法は検索すればいくらでも見つかると思いますけれど、何をなさりたいのかもほとんどわからないので、以下は勝手な推測に基づくものです。
・ハンバーガーと言っているものは、いわゆる3本線のメニューで
・クリック時にバツ印とトグルになるもの
・メニューリストは元のCSSに「left:-50%」とあったので、
　いわゆるドロワータイプと推測しました

現状がどのような仕組みなのか不明なので、上記のような内容のものを勝手に作成してみました。
（ですので、質問者様が作成しているものとは違うだろうと思います）

仕組みとして、activeクラスを設定/削除するだけで状態が変わるようにしてあるので、setTimeoutのような時間差を設定する必要もなくなります。
また、簡単なスクリプトで済むのでjQueryも不要です。

以下、ご参考までに。
<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style>
#menu {
position: relative; cursor: pointer;
width: 45px; height: 36px;
}
#menu span {
position: absolute;
width: 100%; height: 3px;
line-height: 0;
background-color: #666;
border-radius: 2px;
transition: 0.7s;
}
#menu span { top: 0; left: 0; }
#menu span:nth-child(2) { top: 16px; left: 0; }
#menu span:nth-child(3) { top: 32px; left:0; }
#menu.active span:first-child {
transform: translateY(16px) rotate(135deg);
}
#menu.active span:nth-child(2) { left: 22px; width: 0; }
#menu.active span:nth-child(3) {
transform: translateY(-16px) rotate(-135deg);
}

#navi {
position: absolute;
top: 0; left: -200px;
margin-top: 50px;
width: 130px; height: calc(100% - 50px);
background-color: rgba(0, 0, 0, 0.3);
transition: 0.5s;
}
#navi a { text-decoration: none; }
#menu.active + #navi { left: 0; }
</style>

<script>
window.addEventListener('DOMContentLoaded', e => {
const
ELM = s => document.querySelector(s),
ADDEvt = (e, f) => { e.addEventListener('click', f) },
menu = ELM('#menu');

ADDEvt( menu, e => { menu.classList.toggle('active') });
ADDEvt(ELM('#navi'), e =>{
if(e.target.nodeName == "A") menu.classList.remove('active');
});
});
</script>
</head>
<body>
<section>
<div id="menu">
<span></span><span></span><span></span>
</div>

<nav id="navi">
<ul>
<li><a href="a.html">A</a></li>
<li><a href="b.html">B</a></li>
<li><a href="c.html">C</a></li>
<li><a href="d.html">D</a></li>
<li><a href="#e">E</a></li>
</ul>
</nav>
</section>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

早速ありがとうございます！説明が足りず申し訳ございません。CSSをなるべく貼り付けようと思いながら、文字数オーバーになりどの部分を提示するのがいいのか分からず、失礼いたしました。

そして、以下で解決しました！
<script>
$(info => {
$(".menu li a").on('click', info =>{
setTimeout(()=>{ $(".nav-container").hide(); }, 30);
/*→追加部分*/　$("#nav").prop("checked", false);
});
$(".bottom-menu-content").on('click', info => {
$(".nav-container").show();
});
});
</script>

<input type="checkbox" id="nav" />の「:checked」によってハンバーガー三本線<label for="nav" class="menu-bar"></label>の切り替えをしているようだったので、このチェックを外す処理を追加したらバッテンから三本線に戻りました。三本線はmenu-barで以下のように作っていました。
説明不足のなか細やかに教えて頂きありがとうございました。

CSS
.bottom-menu-content label.menu-bar:before {
content: '';
width: 40px;
height: 4px;
position: absolute;
top: 10px;
left: 0px;
}

.bottom-menu-content label.menu-bar:after {
　/*beforeと同じ内容*/;
top: 20px;
left: 0px;
}

省略 input#nav:checked~label.menu-bar:before {
/*バッテンにしたときの斜め棒*/
}

省略 input#nav:checked~label.menu-bar:after {
/*バッテンにしたときの斜め棒*/
}

通報する

お礼日時：2021/07/20 09:34

No.3

回答者： fujillin
回答日時：2021/07/19 11:08

No2です

＞イベント処理外、というのは以下で合っていますか。
何をなさりたいのかわからなくなってきましたけれど・・・

こういうことではないのでしょうか？
※ 私が勝手に解釈した内容です
※ ご提示のままではCSSが邪魔するので、最低限の修正を加えてます

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style>
.nav-container {
position: absolute;
/* left: -50%; */
top: 0;
height: 100%;
width: 130px;
background-color: rgba(0, 0, 0, 0.7);
display: none;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6 …
<script>
$(e => {
$(".menu li a").on('click', e =>{
setTimeout(()=>{ $(".nav-container").hide(); }, 30);
});
$(".bottom-menu-content").on('click', e => {
$(".nav-container").show();
});
});
</script>
</head>
<body>
<div class="bottom-menu-content">
<input type="checkbox" id="nav" />
<label for="nav" class="menu-bar"></label>
<label for="nav" class="toggle-label">MENU</label>
<nav class="nav-container">
<div class="wrapper">
<ul class="menu">
<li><a href="a.html" class="link-nav">A</a></li>
<li><a href="b.html" class="link-nav">B</a></li>
<li><a href="c.html" class="link-nav">C</a></li>
<li><a href="d.html" class="link-nav">D</a></li>
<li><a href="#e" class="scroll link-nav">E</a></li>
</ul>
</div>
</nav>
</div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

早速ありがとうございます！
クリックしたら閉じる、できました！
そして、すみません。

現在、ハンバーガーをクリックすると三本線がバッテンへ変化し、リンク先をクリックするとバッテンが三本線へ戻り各ページへ遷移するにようになっています。これを「#e」をクリックしたときも同様の流れにできたらと思います。今は「#e」をクリックしたときはバッテンのままとなっています。

以前記入したこの部分で開閉のチェックをしているのかと思い、
<script>
$('#nav').change(function () {
if ($('#nav').is(":checked")) {
$('body').css('overflow', 'hidden');
} else {
$('body').css('overflow', 'auto');
}
});
</script>
以下の部分に一文追加してみたのですが、値が変わるだけで、バツ印のままでした。
<script>
$(e=> {
$(".menu li a").on('click', e=>{
setTimeout(()=>{ $(".nav-container").hide(); }, 30);
/*追加→*/ $('body').css('overflow', 'auto');
});
$(".bottom-menu-content").on('click', e=> {
$(".nav-container").show();

});
});
</script>

その他、CSS部分で記載したほうがよい箇所ございましたらご指摘頂けますと幸いです。
度々申し訳ございません。
どうぞよろしくお願いいたします。

通報する

お礼日時：2021/07/19 11:45

No.2

回答者： fujillin
回答日時：2021/07/16 16:11

No1です。

＞CSSに「.hide { display: none; }」～～みましたが、
＞動きが変わりませんでした。
あらら…、確認しました。間違ってしまったようです。ごめんなさい。

同時にいろいろ試していたので、2）の設定を外し忘れてテストしてしまっていたようです。（←言い訳　笑）
どうやらイベント処理終了時に、jQuery側が「display:block」を再設定しているように見受けられます。
（そのために、処理中に非表示にしても効かないようです）

…というわけで、2）の方法なら動作するはずですので、そちらを試してみてください。

- 0
- 件

通報する

この回答へのお礼

早速ありがとうございます。
イベント処理外、というのは以下で合っていますか。
動きが変わらず、その他確認事項ございましたら教えてください。
nav-containerのCSSを念のため記載いたします。

<script>
$(window).load(function() {
setTimeout(()=>{ $(".nav-container").hide(); }, 30);

$(".menu li a").click(function(event) {
　　　　　 $(".nav-container").hide();
　　　 });
$(".bottom-menu-content").click(function(event) {
　　　　　 $(".nav-container").show();
　　　 });
});
</script>

CSS
.nav-container {
position: absolute;
left: -50%;
top: 0;
height: 100%;
width: 130px;
background-color: rgba(0, 0, 0, 0.7);
}

通報する

お礼日時：2021/07/19 10:38

参考程度に

No.1

回答者： fujillin
回答日時：2021/07/16 14:59

こんにちは

＞ハンバーガーメニューをクリックしたら
CSS等何もないので、どれが「ハンバーガー」なのかわかりませんけれど、ご提示のスクリプトの
＞$(".nav-container").hide();
が動作しないのかなと解釈しました。

jQueryの内部を調べてはいませんけれど、雰囲気からすると、event.targetの非表示に制限がかかってるっぽいですね。
素のスクリプトだけで同様の処理を試してみたところ、問題なく非表示にできます。

対処療法的になってしまいますが、間接的に非表示にすれば処理できるようです。
あるいは、（簡単な処理なので）素のスクリプトのみで実装してしまうかですね。

以下、jQueryでも動作する方法。
1）クラスを利用する
CSSであらかじめ
　.hide { display: none; }
などを設定しておいて、スクリプトからは
　$(".nav-container").addClass('hide');
を実行する。

2）イベント処理外で非表示にする
　setTimeout(()=>{ $(".nav-container").hide(); }, 30);
などとしておく。

1）、2）どちらでも動作します。
他にも方法はあると思いますし、原因をきちんと調べた上ではないので申し訳ありませんけれど、とりあえずご参考までに。

- 0
- 件

通報する

この回答へのお礼

早速ありがとうございます。
CSSに「.hide { display: none; }」を追加して以下のようにしてみましたが、動きが変わりませんでした。

〇index.html
$(window).load(function() {
$(".menu li a").click(function(event) {
　　　　　 $(".nav-container").addClass('hide');
　　　 });
$(".bottom-menu-content").click(function(event) {
　　　　　 $(".nav-container").show();
　　　 });
});

購入したテンプレートを修正しているのですが、よく見ると、最初の方で以下のようにあり、これが関係あるのか？と見ていました。

index.html
<script>
$('#nav').change(function () {
if ($('#nav').is(":checked")) {
$('body').css('overflow', 'hidden');
} else {
$('body').css('overflow', 'auto');
}
});
</script>

CSS部分を貼り付けようとしたら文字数オーバーになってしましました。
その他必要な情報ありましたら確認いたします。

何か、その他確認事項ございましたら教えてください。
どうぞよろしくお願いいたします。