Странное поведение Android с общим селектором при добавлении класса динамически

Question

Пока я писал несколько javascript-кодов html &, я обнаружил странное поведение с моим телефоном Android (Samsung Galaxy 3, 4.1.2).

То, что я пытался достичь, было показать сиблинг tr элементов первого элемента tr, присвоив ему имя класса динамически. У класса есть общий селектор, который дает сиб. TRs «display: table-row», которые изначально «отображаются: нет».

Ниже я коротко написал код, похожий на то, с чем у меня возникла проблема.

http://jsfiddle.net/e5yXR/

<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 Android tab3 и нашел исправление (хромого). В основном, мои строки, которые были скрыты/показаны из общего селектора, были выбраны их именем класса, а не их именем элемента. Затем я просто удалял/добавлял класс в строки ... который по какой-либо причине обновляет строки соответственно. Я пытался заставить перепланировку, но это было не так. В конце концов, я не уверен, в чем проблема, но это сработало, несмотря на то, что я считаю, что это плохое решение, поскольку это может быть дорогостоящей операцией на мобильном устройстве с множеством строк для обновления ...

Во всяком случае, если я возьму ваш пример, исправление будет выглядеть следующим образом: (или как 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>