質問 > フロント機能 > 幅768px以下になるとJqueryが効かなくなる |
フロント機能
スレッド表示 | 新しいものから | 前のトピック | 次のトピック | 下へ |
投稿者 | スレッド |
---|---|
okacchi |
投稿日時: 2020/9/4 17:21
対応状況: −−−
|
半人前 登録日: 2020/5/17 居住地: 投稿: 11 |
幅768px以下になるとJqueryが効かなくなる [EC-CUBE] EC-CUBE4.0.3
[OS] macOS 10.15.4 [PHP] 7.3.9 [データベース] mysql 5.7.26 [WEBサーバ] Apache [現象] ハンバーガーメニュークリックで、openクラスを追加、画面左からスマホ用のメニューがニョキッと出てくるようにしたいです。幅1100pxから769pxまでは正常に機能しますが、768px以下になるとjQueryが効かなくなります。 768px以下では何かしらの設定が必要でしょうか。よろしくお願いいたします。 ▼HTML <div id="navArea"> <nav class="sp_nav"> <div class="inner"> <ul> <li><a href="xxx.php"></a>xxx</li> <li><a href="yyy.php"></a>yyy</li> <li><a href="zzz.php"></a>zzz</li> </ul> </div> </nav> <div class="ec_nav_toggle_btn"> <span></span> <span></span> <span></span> </div> <div id="mask"></div> </div> </div> ▼css .sp_nav { display: block; position: fixed; top: 0; left: -250px; bottom: 0; width: 250px; background:rgba(255, 255, 255, 0.904); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; transition: all .5s; z-index: 3; opacity: 0; } .open .sp_nav { left: 0; opacity: 1; } #mask { display: none; transition: all .5s; } .open #mask { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: .8; z-index: 2; cursor: pointer; } ▼jQuery $(document).ready(function() { $('.ec_nav_toggle_btn').on( 'click', function() { if ( ! $('#navArea').hasClass( 'open' ) ) { $('#navArea').addClass( 'open' ); } else { $('#navArea').removeClass( 'open' ); } }); $('#mask').on('click', function() { $('#navArea').removeClass( 'open' ); }); } ); |
okacchi |
投稿日時: 2020/9/7 11:41
対応状況: 解決済
|
半人前 登録日: 2020/5/17 居住地: 投稿: 11 |
Re: 幅768px以下になるとJqueryが効かなくなる 当方の勉強不足でした。自己解決しました。
同じtwigを2箇所からインクルードしており、openクラスの追加が先に読み込まれている方しかかからなかったようです。twigの書き方を変更した所、表示ができるようになりました。ありがとうございました。 |
スレッド表示 | 新しいものから | 前のトピック | 次のトピック | トップ |