我正在尝试创建一个响应式网站,我想在其中显示 3 个框:
(第 1 天 - 第 2 天 - 第 3 天)
我希望它在小于 436px 的屏幕和桌面上显示 See Image
我希望它负责,因此当我调整浏览器大小时,它应该跳转到小于 436px 的屏幕,并在桌面上时重新调整大小。
重要提示:在桌面上时,这些框不应隐藏内容。
我的代码:jsfiddle.net/94sfkhcu/
希望有人能帮忙。谢谢:)
最佳答案
$(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(根据屏幕尺寸隐藏和显示),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40547783/