表示隠すjQueryのデスクトップビューで正常に動作しますが、電話でのdivは、ショーの間、他のdivをオーバーラップされて表示される（）

Question

私は、選択ボックス

使用しての選択に基づいて、入力されたテキストボックスを非表示にし、表示したいですHTMLコードは次のとおりです。

<div class="row"> 
       <div class="form-group"> 
        <div class="col-sm-1 label2"> 
         <label class="control-label m-t-10">List Price: </label> 
        </div> 
        <div class="col-sm-2"> 
         <select class="form-control input-filter"> 
          <option value="max">Maximum</option> 
          <option value="between">Between</option> 
         </select> 
        </div> 
        <div class="col-sm-1 primary"> 
         <input type="text" placeholder="Price" class="form-control" id="list_price"> 
        </div> 
        <div class="secondary" style="display:none"> 
         <div class="col-sm-1"> 
          <input type="text" placeholder="Min" class="form-control" id="min_price"> 
         </div> 

         <div class="and">and</div> 

         <div class="col-sm-1"> 
          <input type="text" placeholder="Max" class="form-control" id="max_price"> 
         </div> 
        </div> 
       </div> 
       </div> 

Javascriptを：メディアクエリで

$('.input-filter').on('change', function() { 
    if($(this).val() == "between")      
    { 

     $(this).parent().parent().find(".primary").hide().next(".secondary").show(); 

    } 

    else{ 
     $(this).parent().parent().find(".primary").show().next(".secondary").hide(); 
    } 

}); 

は（ショーの間のdivの高さを増やすことをお勧めします）。 hide（）の間に減少/元に戻ります。

ありがとうございました

Answer 1

これはメディアクエリを必要としません。メディアクエリは、画面サイズに応じてスタイルを適用します。あなたができることは、divをクラスに追加して削除することです。

$('.primary').addClass('hidden resize-prim') 
.next('.secondary').removeClass('hidden resize-sec'); 

スタイルシートに適用したいスタイルを含めます。

また、メディアクエリ内のクラスを置くことができます：

@media (max-width: 600px) { 
    .resize-prim { 
    height: 50px; 
    } 
}