调整大小时将Div转换为手风琴

Convert Divs into accordion upon resizing

本文关键字：转换 手风琴 Div 小时 调整      更新时间：2023-09-26

我在桌面视图中有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
            });
相关文章：