android - Accordion 面板中的内容格式错误 - Android

Question

我正在为一个移动网站使用一个简单的 jQuery/CSS Accordion 面板(编码为一个灵活的设计，其中包含一些媒体查询)。它在我能够测试的大多数浏览器中的表现都符合预期，但在我的 Android 设备(Galaxy Nexus，Android 4.2.2)上的默认浏览器中， Accordion 中存在一个错误。当我打开一个面板时，所有内容都会跳入一个奇怪的格式布局，但如果我单击另一个面板或关闭打开的面板，所有内容都会跳入我期望的布局。

脚本:

$('.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() 的高度和宽度有关；需要在发挥其魔力的同时进行计算...