Javascript(当浏览器窗口超过436px时调整大小) [英] Javascript (Resize when browser window is over 436px)
问题描述
我将尝试详细解释我想要的东西,因为很难解释我想要的样子. 我已经创建了一个响应式网站,我想在其中显示3个框:
I will try to explain in details what I want, since it's hard to explain how I want it to be. I've created a responsive website, where I want to show 3 boxes:
(第1天-第2天-第3天)
(Day 1 - Day 2 - Day 3)
问题(尝试此操作,您会看到我的问题:
The issue (Try this and U will see what is my issue:
- 将屏幕窗口的大小调整为小于436像素(以便您获得红色框)
- 然后单击第2天,然后打开第2天的内容
- 开始调整浏览器大小(然后将关闭第2天"框 自动地.我不希望在调整大小时将其关闭.
- Resize the screen window to less then 436px (So u get the red boxes)
- Then click on Day 2, which then opens the content of Day 2
- Start to resize the browser (This will then close the box "Day 2" automatically. I dont want it to close when I resize.
我创建调整大小的原因是在台式机上,所以它扩大了在台式机上的显示范围.
The reason why I have created the resize, was for the desktop, so it was expanding all the boxes when seen on desktop.
我的代码:
$(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>
推荐答案
只需将$menuItem.toggleClass( "bbottom2" );
添加到.btop
按钮
并将bbottom
类也添加到其他票证中
Just add $menuItem.toggleClass( "bbottom2" );
to the .btop
button
and add also bbottom
class to other ticket
$(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>
这篇关于Javascript(当浏览器窗口超过436px时调整大小)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!