1

我正在为一个移动网站使用一个简单的 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 的修复方法——有人有其他想法吗？

4

1 回答 1

1

经过数小时的头痛后找到了简单的答案：

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

与 .slideToggle(); 的高度和宽度有关。需要在它施展魔法的同时进行计算……

于 2013-06-18T15:09:41.767 回答