Question

我有以下列表：

<ul>
<li class="container">
<div class="age">24</div>
<div class="married">no</div>
</li>

<li class="container">
<div class="age">27</div>
<div class="married">yes</div>
</li>

<li class="container">
<div class="age">34</div>
<div class="married">no</div>
</li>
</ul>

期望的结果

li包含div.married的{{1}}元素默认情况下不显示。 This code使用Jquery做到这一点。

但是在我的项目中有很多条目，所以每次加载页面时，您都可以看到所涉及的条目在几分之一秒内闪烁。我认为这是因为在完全加载加载在body标记末尾上方的行上的脚本之前，页面开始显示在浏览器上。

有关解决方案的问题和评论

有没有办法只用css做我想做的事情？（有 yes在css中，但我不想依赖它，因为它是不推荐使用css3）
我尝试在:contains元素中仅为该Jquery行创建一个单独的脚本条目但是仍有明显的闪烁。

Answer 1

我担心纯CSS无法实现。如果你想避免闪烁效应，我建议这种方法：

JS：

$(document).ready(function() {
  $(function(){
  ////Jquery in here/////  

  $(".married:contains(no)").parent().css('display','block');

   //////////////////////
 });
});

的CSS：

li {
 display:none;
}

如果子元素满足指定条件，则默认情况下不显示父元素

1 个答案: