バージョン選択

フォーラム

メニュー

オンライン状況

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

サイト内検索

質問 > フロント機能 > 幅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の書き方を変更した所、表示ができるようになりました。ありがとうございました。
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


EC-CUBE公式 Amazon Payプラグイン

統計情報

総メンバー数は88,295名です
総投稿数は109,692件です

投稿数ランキング

1
seasoft
7365
2
468
3217
3
AMUAMU
2712
4
nanasess
2303
5
umebius
2085
6
yuh
1818
7
h_tanaka
1610
8
red
1568
9
mcontact
1240
10
tsuji
958
11
fukap
907
12
shutta
835
13
tao_s
796
14 ramrun 789
15 karin 689
16 sumida 641
17
homan
633
18 DELIGHT 572
19
patapata
502
20
flealog
485


ネットショップの壺

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

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