jQueryでのレスポンシブが綺麗に動かない

media();
jQuery(window).on("resize", function(){ media(); });

function media() {
// 横幅を取得
var width = jQuery(window).width();
if(width < 992) {
jQuery('.pa').on('click', e=>{
jQuery(e.target).next('.pb').css('display', 'inline');
jQuery('.pb').click(function(){
jQuery('.pb').css('display','none')
})
});
}
}
というコードで画面幅が992より小さくなった時にif文の中の動作をさせているのですが、ブラウザの幅を一回992より小さくすると再度992以上にしたときもそれが残って困っています。
if(width < 992) {
jQuery('.pa').on('click', e=>{
jQuery(e.target).next('.pb').css('display', 'inline');
jQuery('.pb').click(function(){
jQuery('.pb').css('display','none')
})
});
}else{
}
のようにしてもダメでした。
どこを改善すればいいかご教示お願いいたします。

No.3 ベストアンサー 回答者： Ogre7077 回答日時： 2022/06/21 12:06

on したものを取り消したいなら off しましょう

https://api.jquery.com/off/

この回答へのお礼

ありがとうございました、無事取り消せました。

お礼日時：2022/06/21 12:12

No.2 回答者： fujillin 回答日時： 2022/06/21 11:35

こんにちは

全体像が不明ですけれど、「レスポンシブ」とは関係がないような・・・

＞jQuery('.pa').on('click', e=>{
関数mediaを実行するたびに、イベント処理を追加してゆきますので、多重設定することになります。
理解の上でやっているのなら良いですが、そうでないのならやめた方が良いでしょう。

イベント処理は1度だけ設定するようにしておいて、その処理の中で
　「ウィンドウサイズによって処理するかしないかを判断する」
ようにしておけば宜しいかと。

この回答へのお礼

ありがとうございました

お礼日時：2022/06/21 12:12

No.1 回答者： pe-ke-pe-ke 回答日時： 2022/06/21 11:16

else節の中にレイアウトを戻す処理を書けばオッケーです。

この回答へのお礼

ありがとうございました

お礼日時：2022/06/21 12:11