###前提・実現したいこと
スマホ用のメニューを作成しています。
メニューボタンをクリックした際に、先祖要素の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>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/08/21 09:04