的Javascript（取決於屏幕尺寸隱藏和顯示）

Question

我試着去創造一個負責任的網站，在這裏我想告訴3盒：

（1日 - 2日 - 3日）

我想它看屏幕較小然後436px和桌面 See Image

我想這是負責任的，所以當我調整我的瀏覽器，它應該跳到屏幕較小然後436px和調整回其在桌面上的時候。

重要提示：在桌面上，這些框不應該可以隱藏內容。

我的代碼：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(); 
     }); 
});