http://www.webopixel.net/javascript/1060.html
このページを参考にハンバーガメニューを実装しました。
通常の動作は問題ありませんが、
リンク内ページ遷移を行うと、
ドロップダウンしたメニューが閉じません。
ハンバーガーメニューの×ボタンをクリックすると、
ドロップダウンしたメニューはアニメーションしながら閉じます。
jQueryが初心者であるため、修正方法がいまいちわからず困っています。
どなたかご教授願います。
2473mikaが👍を押しています
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
実行した実際のソースコードなどを載せるといいかもしれません。
回答1件
0
ベストアンサー
こんな感じではいかがでしょう?
javascript
1$('#nav-toggle').click(function(){ 2 $header.toggleClass('open'); 3}); 4// ↓ 5$('#nav-toggle,#global-nav ul li a').click(function(){ 6 $header.toggleClass('open'); 7});
投稿2016/12/05 10:20
総合スコア2722
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/12/05 11:41
ありがとうございます!
差し替えたら、毎回閉じるようになりました!
しかし、新たに問題が発生しました。
<header id="top-head">
<div class="inner">
<div id="mobile-head">
<h1 class="logo">Logo</h1>
<div id="nav-toggle">
<div>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<nav id="global-nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">PRODUCT</a></li>
<li><a href="#">WORKS</a></li>
<li><a href="#">COMPANY</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</div>
</header>
このパターンはOKなのですが、
<header id="top-head">
<div class="inner">
<div id="mobile-head">
<h1 class="logo">Logo</h1>
<div id="nav-toggle">
<div>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<nav id="global-nav">
<ul>
<li><a href="#">HOME</a>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
</li>
<li><a href="#">PRODUCT</a></li>
<li><a href="#">WORKS</a></li>
<li><a href="#">COMPANY</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</div>
</header>
上記のような、多階層にしたとき、
HOMEをクリックした時点で、閉じてしまい、入れ子になったメニューが選択できません。
ある、liだけ除外するといった記述の仕方があるのでしょうか?
2016/12/05 12:00
今回、このうちの5番目の要素だけがリンク内ページ遷移機能があったので、
// Nav Toggle Button
$('#nav-toggle,#global-nav ul li:nth-child(5) a').click(function(){
$header.toggleClass('open');
});
とすることで、思うような挙動になりました。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。