Question

当我写一些HTML和JavaScript代码时，我发现我的Android手机（三星Galaxy 3,4.1.2）有一种奇怪的行为。

我试图通过动态地给它一个类名来显示第一个tr元素的兄弟元素。该类有一般兄弟选择器给兄弟TRs“display：table-row”，最初是“display：none”

下面我简要地写了一些类似于我遇到问题的代码。

<table>
<tbody>
    <tr class="a"><td>test a</td></tr>
    <tr class="b"><td>test b</td></tr>
    <tr class="c"><td>test c</td></tr>
</tbody>
</table>

<style>
.a{display:table-row;}
.b{display:none;}
.c{display:none;}
.a.active~tr{display:table-row}
</style>

<script>
$('.a').click(function(){ $(this).addClass('active') })
</script>

有谁知道如何解决这个问题？

Answer 1

有点晚了，但我在Android三星tab3平板电脑上遇到了同样的问题，并找到了（跛脚）修复。基本上，我从一般兄弟选择器隐藏/显示的行是通过它们的类名而不是它们的元素名来选择的。然后我简单地删除/添加行上的类...无论出于什么原因相应地更新行。我试图强迫回流，但那是不行的。最后，我不确定问题是什么，但是这很有用，尽管在我看来这是一个糟糕的修复，因为这可能是一个昂贵的操作，在移动设备上有很多行要更新... < / p>

无论如何，如果我举个例子，修复方法如下：（或作为jsfiffle：http://jsfiddle.net/kTWS2/）

<table>
<tbody>
    <tr class="a"><td>test a</td></tr>
    <tr class="b"><td>test b</td></tr>
    <tr class="b"><td>test c</td></tr>
</tbody>
</table>

<style>
    .a{display:table-row;}
    .b{display:none;}
    .a.active~.b{display:table-row}
</style>

<script>
    $('.a').click(function(){
        $(this)
            .toggleClass('active')
            .parent()
            .find('.b')
            .removeClass('b')
            .addClass('b');
    });
</script>

在动态添加类时，Android与一般兄弟选择器的奇怪行为

1 个答案: