のJavascript（画面サイズに応じて非表示と表示）

Question

Imは私が3つのボックスを表示したい応答のウェブサイト、作成しようとしている：

（1日目 - 3日目 - 2日目）私はそれ欲しい

を436pxとデスクトップより小さい画面で見る See Image

私はそれが責任を負うことを望みます、私は私のブラウザのサイズを変更すると、それは436pxより小さい画面にジャンプし、デスクトップ上にあるときにサイズを戻す必要があります。

重要：デスクトップの場合、ボックスはコンテンツを非表示にすべきではありません。

MY CODE：jsfiddle.net/94sfkhcu/

誰かが助けることができると思います。ありがとうございました:)

Answer 1

$(document).ready(function() { 
 
     if($(window).width()<436) 
 
     $('.bbottom2').hide(); 
 
     $('.btop').click(function(e) { 
 
     e.preventDefault(); 
 
     var $menuItem = $(this).next('.bbottom, .bbottom2'); 
 
     $menuItem.slideToggle(); 
 
     $menuItem.toggleClass("bbottom2"); 
 
     }); 
 
}); 
 
    
 
    
 
     $(window).resize(function() { 
 
     if($(window).width()>436) $('.bbottom, .bbottom2').show(); 
 
     else $('.bbottom2').hide(); 
 
     });

.ticket{ 
 
    margin:0; 
 
    padding:0; 
 
    float:left; 
 
} 
 

 
.btop2, .btop{ 
 
    background-color:grey; 
 
    color:white; 
 
    padding:5px 10px; 
 
    display:block; 
 
    width:100px; 
 
    border-bottom:1px solid; 
 
    pointer-events:none; 
 
} 
 

 
.btop:hover{ 
 
    background-color:darkgrey; 
 
} 
 

 
/*Responsive*/ 
 
@media screen and (max-width: 436px) { 
 

 
.ticket{ 
 
    margin:0; 
 
    padding:0; 
 
    float:none; 
 
} 
 

 
.btop{ 
 
    background-color:red; 
 
    pointer-events:auto; 
 
} 
 
    
 
    
 

 
.btop:hover{ 
 
    cursor:pointer; 
 
} 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="ticket"> 
 
    <div class="btop">Day 1</div> 
 
    <div class="bbottom">Price 20</div> 
 
</div> 
 

 
<div class="ticket"> 
 
    <div class="btop">Day 2</div> 
 
    <div class="bbottom bbottom2">Price 99</div> 
 
</div> 
 

 
<div class="ticket"> 
 
    <div class="btop">Day 3</div> 
 
    <div class="bbottom bbottom2">Price 149</div> 
 
</div>

Answer 2

私はあなたが必要なものを正しく理解していれば。ウィンドウのサイズを変更すると、ウィンドウの幅が436pxより小さいか大きいかを確認できます。そして、あなたはそれを行うだろうか

$(document).ready(function() { 
     $('.bbottom2').hide(); 
     $('.btop').click(function(e) { 
     e.preventDefault(); 
     var $menuItem = $(this).next('.bbottom, .bbottom2'); 
     $menuItem.slideToggle(); 
     }); 
     $(window).resize(function() { 
     if($(window).width()>436) $('.bbottom2').show(); 
     else $('.bbottom2').hide(); 
     }); 
});