Javascript（浏览器窗口超过436px时resize）

我将尝试详细解释我想要的内容，因为很难解释我的想法。 我创建了一个响应式网站，我想在其中显示3个框：

（第1天 – 第2天 – 第3天）

看图像我希望它看起来如何

问题（试试这个和U会看到我的问题：

1. 将屏幕窗口调整为小于436px（所以你得到红色框）
2. 然后单击第2天，然后打开第2天的内容
3. 开始调整浏览器的大小（这将自动关闭“第2天”框。我不希望它在我resize时关闭。

我创建resize的原因是桌面，所以当在桌面上看到它时，它正在扩展所有框。

我的代码：

$(document).ready(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; } } 

  
 
Day 1
 
Price 20
 
 
 
Day 2
 
Price 99
 
 
 
Day 3
 
Price 149
  

Answer 1

只需添加$menuItem.toggleClass( "bbottom2" ); 到.btop按钮并将bbottom类添加到其他票证

 $(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; } } 

  
 
Day 1
 
Price 20
 
 
 
Day 2
 
Price 99
 
 
 
Day 3
 
Price 149