javascript - 调整大小后将 Div 转换为 Accordion

Question

我在桌面 View 中有 5 个相邻的 div。然而，在调整到 ~640px 后，这些 div 应该会压缩成一个 Accordion 。

关于如何实现这一点有什么想法或提示吗？

示例>

(在桌面上)

|分区#1 |分区#2 |分区#3 |分区#4 |

(在移动设备上，640 像素)

––––––––––
Accordion +
––––––––––
分区#1
分区#2
分区#3
分区#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/

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