javascript - 在黑莓上更改 CSS

Question

我有以下代码，灵感来自 Twitter bootstrap。它适用于除 Blackberry Curve 8200 以外的所有设备。

主要是打开和关闭导航。

事件正在触发，状态被正确拾取但是当我调整 css 时没有任何反应 :( 我试过添加和删除类，同样的问题。

如果我也手动向折叠元素添加样式属性，折叠元素会正确显示。

$('[data-toggle="collapse"]').bind('click', collapse);

function collapse (e) {
    var $this = $(this);
    var target = $this.data('target');
    var state = $this.data('state');
    if ( ! state ) state = 'closed'; 

    if ( state === 'closed' ) {
        $(target).css('height', 'auto');
        $this.data('state', 'open');
    } else {
        $(target).css('height', '0');
        $this.data('state', 'closed');
    }
    return false;
}

基本上就是下面这行

$(target).css('height', 'auto');

只是什么都不做。即使目标变量是正确的。

我的 html 基本上是这样的

<style>
    .nav { height: 0; }
</style>
<div data-toggle="collapse" data-target=".nav">...</div>
<div class="nav">...</div>

-更新-

我使用的是 zepto，刚刚尝试使用 jQuery...同样的问题。

Answer 1

这是 OS5 还是 OS6？如果是 OS5，支持 DOM 重新渲染的浏览器存在各种缺陷。 height: auto 就是其中之一。我使用的解决方案是在页面加载时显示它们，测量然后通过 data-* 属性缓存它们的原始高度，然后将它们全部折叠起来。这样，当需要显示它们时，我可以提供精确的像素尺寸，而不是 auto。