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

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

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

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

Q&A

3回答

239閲覧

クリックした際に、先祖要素のdivに対してjavascriptでstyleを指定したい

waco

総合スコア6

JavaScript

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

0グッド

1クリップ

投稿2017/08/18 03:08

###前提・実現したいこと
スマホ用のメニューを作成しています。
メニューボタンをクリックした際に、先祖要素のdiv(id="gn-menu")に対してクラスを指定するか、style指定したいのですが、実装できません。

当方はhtmlはだいたい理解できるものの、javascriptに関しては、元々のものを改変する勉強を始めたばっかりのレベルです。
よろしくお願いいたします。

現在、メニュー動作は以下のサイトのものを引用
http://demo.mismithportfolio.com/test6/test6.html

上記のソースは画面上で常にヘッダーを上部に固定をする仕様になったいた。
ヘッダーが固定されるのが嫌だったため、その部分のCSSをコメントアウトした。

結果、メニューボタンをクリックしメニュー画面を開くと、メニュー画面は固定されるが
メニューバーの背景がスクロールされてしまっている。
なので、メニューボタンをクリックした場合にposition: fixed;をid="gn-menu"に対して行いたい。

###該当のソースコード

<!-- スマホ用メニュー --> <div id="gn-menu" class="gn-menu-main sp"> <a href="/" id="logo"><img src="./img/common/header_logo_sp.gif" alt="離婚弁護士 無料相談 法律事務所オーセンス"></a> <div class="gn-trigger"> <a class="gn-icon gn-icon-menu"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> </div> <!-- クリック後表示されるメニュー --> <nav class="gn-menu-wrapper"> <div class="gn-scroller"> <p class="field_link">アクセス</p> <ul class="nav-field gn-menu"> <li><a href="./access/">六本木オフィス</a></li> <li><a href="./access/shinjuku.html">新宿オフィス</a></li> <li><a href="./access/kitasenju.html">北千住オフィス</a></li> <li><a href="./access/yokohama.html">横浜オフィス</a></li> </ul> <ul class="gn-menu gn-menu3"> <li><a href="./contact/">お問い合わせ</a></li> </ul> </div> </nav> </div>

###試したこと
↓メニューボタンにあたる部分
<a class="gn-icon gn-icon-menu">

↓クリック時にCSSを付与したい箇所

<div id="gn-menu" class="gn-menu-main sp">
<script type='text/javascript'> $(function(){ $('#gn-menu').on('click' , "a.gn-icon-menu" , function(){ $(this).closest("div#gn-menu").css("position","fixed"); }); }); </script>

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

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

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

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

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

guest

回答3

0

普通にCSSを付与するだけならこれでいいと思います。親要素がIDである以上、クリックされたボタンから辿って親を探す必要はないのでこのようにしました。

javascript

1 $('.gn-icon-menu').on('click',function(){ 2 $('#gn-menu').css('position','fixed'); 3 });

###以下、おまけです

よく使いそうなものは変数に代入するといいです。今回程度のものでしたら気にしなくてもいいかもしれませんが、頭の片隅に入れていてほしいです。

違いは

[ 変数に代入する場合 ]
ページを開いた時、Javascriptは初めにHTML内の$('#gn-menu')を上から順に探してみつかった情報を変数内に保持する。それ以降は変数に代入された情報を元にアクセスするようになります。

[ 変数に代入しない場合 ]
Javascriptは必要なタイミングで毎回HTML内の$('#gn-menu')を上から順に探します。

javascript

1$(function() 2{ 3 //ここで変数に代入 4 var gMenu = $('#gn-menu'); 5 $('.gn-icon-menu').on('click',function(){ 6 gMenu.css('position','fixed'); 7 }); 8});

今回、ボタンはクラスになっています。IDはHTMLの中でひとつというルールがあるのでJavascriptは上から順に探して見つかったら終了ですが、クラスはいくつあるか分からないのでJavascriptは上から下まですべて読みにいきます。なのでHTML上でひとつしか利用しなくても上から下まですべて探すという無駄な動作が増えてします。なので一つしか存在しないメニューでしたらIDを新たに割り振るというのも手だと思います。

また「Javascriptで使ってるよ」というのがわかりやすい名前だと尚いいと思います。

javascript

1$(function() 2{ 3 var gMenu = $('#gn-menu'); 4 $('#js-gn-icon-menu').on('click',function(){ 5 gMenu.css('position','fixed'); 6 }); 7});

投稿2017/08/18 04:23

編集2017/08/18 04:25
IShix

総合スコア1724

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

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

waco

2017/08/21 09:04

返信が遅くなり申し訳ありません。 おまけ等も細かく記載いただきありがとうございます。 ただアドバイスの通り記載してみましたが、スタイルは付与できませんでした。 でも大変、勉強になりました!
guest

0

「付与したい箇所」にはIDが振ってあるので(ページ内に1つであることが保証されている)下記で十分に思います。

javascript

1$(function(){ 2$('#gn-menu').on('click' , "a.gn-icon-menu" , function(){ 3 $("#gn-menu").css("position","fixed"); 4 }); 5});

また、「親」や「子」を指定するのであれば、
parent()children()を利用した方がたどり易いですね。

投稿2017/08/18 04:12

m.ts10806

総合スコア80765

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

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

waco

2017/08/21 08:49

返信が遅くなり申し訳ありません。 お答えいただきありがとうございます! アドバイスいただいたjsに書き換えましたが残念ながら反応がありませんでした。 アドバイスいただいた「親」や「子」をページをもとに調べてみます!
m.ts10806

2017/08/22 00:00 編集

同じIDが複数あるのでは・・?少なくとも私の方では回答内容で動作確認できています。
guest

0

現状のソースコードだけで質問者様の通り「Styleの指定」もしくは「Classの指定」
の動きになります。

javascript

1// Styleの場合 2 $(this).closest("div#gn-menu").css("position","fixed"); 3// Classの場合 4 $(this).closest("div#gn-menu").addClass("clazzName"); 5

ただ、javascriptで指定した以下のHTMLはCSSの指定が無ければ見た目上は存在
しない領域になりますが、その辺りのCSSはどうなっているのか次第かと。

HTML

1<!-- --> 2 <a class="gn-icon gn-icon-menu"> 3 <span class="icon-bar"></span> 4 <span class="icon-bar"></span> 5 <span class="icon-bar"></span> 6 </a>

思うように見た目が変更されないのであれば、上記のHTML要素や他のHTML要素のCSS
設定の整合性がとれていないのではないでしょうか。

投稿2017/08/18 04:07

kanimaru

総合スコア1013

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

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

waco

2017/08/21 09:00 編集

返信が遅くなり申し訳ありません。 お答えいただきありがとうございます! Classの場合の記載も書いていただきありがたかったです!! ただアドバイスいただいたものに書き換えて見ましたが、残念ながらCSSを指定できませんでした。 kanimaruさんの言う通り、他との整合性が取れていないものと考えられます。 他の要素を調べてみます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問