バージョン選択

フォーラム

メニュー

オンライン状況

49 人のユーザが現在オンラインです。 (29 人のユーザが フォーラム を参照しています。)
登録ユーザ: 1
ゲスト: 48
umeda もっと...

サイト内検索

質問 > フロント機能 > 幅768px以下になるとJqueryが効かなくなる

フロント機能

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
okacchi
投稿日時: 2020/9/4 17:21
対応状況: −−−
新米
登録日: 2020/5/17
居住地:
投稿: 9
幅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
居住地:
投稿: 9
Re: 幅768px以下になるとJqueryが効かなくなる
当方の勉強不足でした。自己解決しました。
同じtwigを2箇所からインクルードしており、openクラスの追加が先に読み込まれている方しかかからなかったようです。twigの書き方を変更した所、表示ができるようになりました。ありがとうございました。
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


EC-CUBEペイメント

公式ストアEC-CUBE4系デザインテンプレート続々リリース中

統計情報

総メンバー数は65,865名です
総投稿数は98,028件です

投稿数ランキング

1
seasoft
7332
2
AMUAMU
2712
3
468
2591
4
nanasess
2101
5
umebius
1717
6
yuh
1612
7
red
1422
8
h_tanaka
1038
9
fukap
907
10
tsuji
863
11
shutta
835
12
tao_s
792
13 ramrun 789
14 karin 657
15 sumida 641
16
homan
633
17 DELIGHT 571
18
patapata
502
19
flealog
485
20 tonton 437


ネットショップの壺

EC-CUBEインテグレートパートナー

Copyright© EC-CUBE CO.,LTD. All Rights Reserved.