Android在动态添加类时使用通用兄弟选择器的奇怪行为
Android在动态添加类时使用通用兄弟选择器的奇怪行为
提问于 2013-12-05 07:41:21
当我在写一些html和javascript代码的时候，我发现我的Android手机有一个奇怪的行为(Samsung Galaxy 3，4.1.2)。
我试图实现的是通过动态地为第一个tr元素指定一个类名来显示它的兄弟tr元素。这个类有通用的同级选择器来给出同级to "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>有人知道如何解决这个问题吗？
回答 1
Stack Overflow用户
发布于 2014-03-06 10:06:41
有点晚了，但我在安卓三星tab3平板电脑上遇到了同样的问题，并找到了一个(差劲的)修复方法。基本上，在一般兄弟选择器中隐藏/显示的行是按它们的类名选择的，而不是按元素名选择的。然后，我简单地删除/添加了rows...which上的类，无论出于什么原因，我都会相应地更新行。我试着强制回流，但那是不可能的。最后，我不确定问题是什么，但这是有效的，尽管在我看来这是一个糟糕的修复，因为这可能是一个在移动设备上有很多行要更新的昂贵操作……
无论如何，如果我以您的示例为例，修复方法将如下所示：(或作为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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20394162
复制
相似问题
在ngrepeat中动态添加指令时的奇怪行为
通用的奇怪行为
使用jquery添加和删除类时的奇怪行为
动态添加内容的奇怪行为
动态添加UIBarButtonItem的奇怪行为
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
