Javascript（在浏览器窗口大小超过436px时调整大小）

Question

我会试着详细解释我想要的内容，因为很难解释我想要的内容。 我创建了一个敏感的网站，在这里我想显示3盒：

（1日 - 2日 - 3日）

See image how I want it to look

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

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

为什么我创建了调整大小的原因是为了桌面，所以它在桌面上看到时会扩展所有的框。

我的代码：

$(document).ready(function() { 
 
     if($(window).width()<436) 
 
     $('.bbottom2').hide(); 
 
     $('.btop').click(function(e) { 
 
     e.preventDefault(); 
 
     var $menuItem = $(this).next('.bbottom, .bbottom2'); 
 
     $menuItem.slideToggle(); 
 
     }); 
 
}); 
 
    
 
    
 
     $(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="bbottom2">Price 99</div> 
 
</div> 
 

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

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

<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>