Question

我在桌面视图中有5个div彼此相邻。但是，在调整到大约640px时，这些div应该压缩成手风琴。

有关如何完成此任务的任何想法或提示？

示例＆gt;

（在桌面上）

| DIV＃1 | DIV＃2 | DIV＃3 | DIV＃4 |

（在手机上，640px）

-----------
手风琴+
-----------
DIV＃1
DIV＃2
DIV＃3
DIV＃4
-----------

Answer 1

您可以使用css媒体查询以及js：

<强> 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/

重新调整窗口大小以查看效果。根据需要调整媒体查询值

Answer 2

试试这个。监听窗口大小调整，如果高度低于640，编写jquery / JS代码将其转换为手风琴。

$(window).on('resize', function() {
                if(window.innerHeight < 640)
                    //change it to accordion here
            });

调整大小后将Divs转换为手风琴

2 个答案: