JQueryボタンブラウザのサイズが変更されたときに問題をトグル

Question

私は以前のウェブサイトの1つを即興にし始めましたが、jqueryの問題に突き当たりました。私は、ブートストラップ "visible-xs"クラスを使って、ブラウザの幅が768px未満のときに表示されるボタンを作成しました。 jQueryを使用して、ブラウザのサイズが768px未満のときにデータを非表示にしようとしました。まとめて、ブラウザのサイズが768px以下である場合、ボタンが表示され、データが非表示になります。ボタンをクリックすると、slideToggleを使用してデータを切り替える必要があります。しかし、ここでの問題は、データを切り替えることができないことです。

$(document).ready(function() { 
 
    $(window).resize(function() { 
 
    if ($(window).width() < 768) { 
 
     $(".toggle-this").hide(); 
 
     $(".show-hide-button").click(function() { 
 
     $(".toggle-this").slideToggle(500); 
 
     }); 
 
    } else { 
 
     $(".toggle-this").show(); 
 
    } 
 
    }); 
 
    if ($(window).width() < 768) { 
 
    $(".toggle-this").hide(); 
 
    $(".show-hide-button").click(function() { 
 
     $(".toggle-this").slideToggle(500); 
 
    }); 
 
    } 
 
});

<button type="button" class="btn btn-primary show-hide-button visible-xs">Show More</button> 
 

 
<div class="toggle-this"> 
 
    Lorem ipsum dolor ... 
 
</div>

は、ブラウザのサイズが変更されたときにデータが非表示になりますが、それが更新されたときにデータが戻って表示される原因とリサイズ関数の外 $(window).width() < 768pxを書かれました。 slideToggleはコードに何の影響も与えていないようです。

どうすればよいですか？

Answer 1

jqueryセレクタに構文エラーがあります。

$(document).ready(function() { 
    $(window).resize(function() { 
     if ($(window).width() < 768) { 
      $(".toggle-this").hide(); 
      $(".show-hide-button").click(function() { 
       $(".toggle-this").slideToggle(500); 
      }); 
     } else { 
      $(".toggle-this").show(); 
     } 
    }); 
    if ($(window).width() < 768) { 
     $(".toggle-this").hide(); 
     $(".show-hide-button").click(function() { 
      $(".toggle-this").slideToggle(500); 
     }); 
    } 
}); 

HTML：：

<button type="button" class="btn btn-primary show-hide-button visible-xs">Show More</button> 
<div class="toggle-this">Lorem ipsum dolor ...</div> 

Answer 2

[OK]を、ここでは2つのこと：

1. ブラウザがリサイズされたときは、$(".show-hide-button")ボタンをclickイベントを毎回結合しているあなたは、以下の正しいコードを見つけることができます。これにより同じボタンに複数のイベントバインドが発生します。だから、その問題のためにサイズを変更した後にshow/hideの部分を保持し、それ以外のイベントバインディングをシフトして一度だけ行います（ドキュメントの準備ができているかもしれません）。

2. jQuery/JavaScriptでこれを表示/非表示にしないでください。 CSSのメディアクエリで十分です。 ブートストラップの十分なクラスがすでに書かれています。これを試してください。

   このコード試す：

   <button type="button" class="btn btn-primary show-hide-button visible-xs" aria-expanded="true" data-toggle="collapse" data-target="#collapseExample">Show More</button> 
   
   <div class="toggle-this collapse" id="collapseExample"> 
       Lorem ipsum dolor ... 
   </div> 
   
   
   $(document).ready(function() { 
   if ($(window).width() <= 768) { 
       $('#collapseExample').removeClass('in') 
   } 
   

   を}）。

ここjsFiddleでこれを参照してください：https://jsfiddle.net/DTcHh/