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

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

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

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

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

283閲覧

ドロワーメニュー(ハンバーガーメニュー)でページ内リンククリックでメニューどじる

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/05/08 12:42

ドロワーメニュー( ハンバーガメニュー)をjQuery作成しています。

メニューのリンクは全てページ内リンクです。
ページ内リンクをクリックだとメニューが閉じないです。
リンクをクリックした際にメニューを閉じたいです。

html 、jQueryを下記に書いております。

html

1<div class="header-toggle"> 2 <div class="header-toggle-logo"> 3 <img src="" alt=""> 4 </div> 5 <div class="header-toggle-nav row"> 6 <ul> 7 <li><a href="#concept">Concept</a></li> 8 <li><a href="#news">News</a></li> 9 <li><a href="#lesson">Lesson</a></li> 10 </ul> 11 </div> 12 </div>

下記のコードでクリック、メニューを開ける
三本線画像と×画像の入れ替えを行なっています。

javaScript

1$(function() { 2 $('.header-btn-nav').click(function() { 3 $(".header-toggle").slideToggle(); 4 $(this).toggleClass("active"); 5 if($(this).hasClass('active')) { 6 $('.header-btn-nav img').attr('src','img/common/close'); 7 } else { 8 $('.header-btn-nav img').attr('src','img/common/menu'); 9 } 10 }); 11});

色々試し、上記のコードに加えてみましたが、メニューが閉じると画像の入れ替えがうまく行かなくなったりします。

スムーススクロールは下記です。

javaScript

1$(function () { 2 var headerHight = 80; //ヘッダの高さ 3 $('a[href^=#]').click(function(){ 4 var href= $(this).attr("href"); 5 var target = $(href == "#" || href == "" ? 'html' : href); 6 var position = target.offset().top-headerHight; //ヘッダの高さ分位置をずらす 7 $("html, body").animate({scrollTop:position}, 550, "swing"); 8 return false; 9 }); 10});

よろしくお願いいたします!

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

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

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

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

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

guest

回答1

0

ベストアンサー

こんな感じでどうでしょう。

JavaScript

1$( function () { 2 var headerHight = 80; //ヘッダの高さ 3 $( 'a[href^=#]' ).click( function() { 4 if ( $( this ).closest( '.header-toggle-nav' ).length ) { 5 $( '.header-btn-nav' ).click(); 6 } 7 var href= $( this ).attr( 'href' ); 8 var target = $( href == "#" || href == "" ? 'html' : href ); 9 var position = target.offset().top-headerHight; //ヘッダの高さ分位置をずらす 10 $( 'html, body' ).animate( { scrollTop: position }, 550, 'swing' ); 11 return false; 12 } ); 13} );

【jQueryで親要素を取得する:parent(), parents(), closest() | UX MILK】
http://uxmilk.jp/8150

投稿2018/05/08 19:10

kei344

総合スコア69364

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

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

退会済みユーザー

退会済みユーザー

2018/05/08 22:53

ありがとうございます! 完璧に動きました!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問