Question

我正在为移动网站使用一个简单的jQuery / CSS手风琴面板（编码为灵活的设计，并引入了一些媒体查询）。它在大多数我能够测试的浏览器中都表现得如预期，但在我的Android设备（Galaxy Nexus，Android 4.2.2）的默认浏览器中，手风琴中存在一个错误。当我打开一个面板时，所有内容都跳转到一个奇怪的格式化布局，但如果我点击另一个面板或关闭打开的面板，所有内容都会跳转到我希望它们具有的布局。

剧本：

$('.accordion > .heading > a, .accordion > .heading').on('click', function () {
    var $next = ($(this).is('a') ? $(this).parent().next() : $(this).next());
    $next.slideToggle();
    return false;
});

CSS：

.accordion {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
.accordion .slidepanel {
    background: #f6f6f6;
    display: none;
    margin: 0;
    padding: 3%;
    position: relative;
}

我已尝试将面板设置为默认打开，并且所有格式都符合预期。我试图想出一个针对Android的解决方案 - 我的任何人都有其他想法吗？

Answer 1

经过几个小时的头痛后发现简单的答案：

.accordion .slidepanel {
    background: #f6f6f6;
    display: none;
    overflow: hidden;   <<---
    margin: 0;
    padding: 3%;
    position: relative;
}

与.slideToggle（）;的高度和宽度有关。需要计算，而它正在做它的魔力...

手风琴面板中错误格式化的内容 - Android

1 个答案: