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>