我在桌面视图中有5个div。然而,当调整大小到约640px时,这些div应该会压缩成手风琴。
关于如何做到这一点,有什么想法或建议吗?
示例>
(在桌面上)
|DIV#1|DIV#2|DIV#3|DIV#4|
(在移动设备上,分辨率为640px)
–ndash–ndash–ndash–ndash–ndash–
手风琴+
–ndash–ndash–ndash–ndash–ndash–
DIV#1
DIV#2
DIV#3
DIV#4
–ndash–ndash–ndash–ndash–ndash–
您可以与js:一起使用css媒体查询
HTML
<div class="accordion">+</div>
<div class="a">A</div>
<div class="a">B</div>
<div class="a">C</div>
<div class="a">D</div>
<div class="a">E</div>
CSS:
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-width : 640px) {
/* Styles */
div {
display:block;
padding:10px;
border:1px solid #544454;
margin:5px
}
.a {
display:none;
}
}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 641px) {
/* Styles */
.accordion {
display:none;
}
.a {
display:inline-block;
margin:10px;
width:80px;
height:40px;
border:1px solid green;
}
}
JS:
$(document).ready(function () {
$('.accordion').on('click', function () {
$('.a').slideToggle('fast');
});
});
演示:http://jsfiddle.net/lotusgodkk/GCu2D/335/
重新调整窗口大小以查看效果。根据您的需要调整媒体查询值
试试这个。listn来调整窗口大小,如果高度低于640,则编写jquery/JS代码将其转换为手风琴。
$(window).on('resize', function() {
if(window.innerHeight < 640)
//change it to accordion here
});