的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(); 
     }); 
});