3

私は次のリストを持っています：

<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要素はデフォルトでは表示されません 。このコードは、Jqueryを使用してそれを行います。div.marriedyes

しかし、私のプロジェクトにはたくさんのエントリがあるので、ページが読み込まれるたびに、関連するエントリがほんの一瞬でちらつくのを見ることができます。これは、bodyタグの終わりのすぐ上の行に読み込まれるスクリプトを完全に読み込む前に、ページがブラウザに表示され始めるためだと思います。

ソリューションに関する質問と意見

  • cssだけを使ってやりたいことをする方法はありますか？（ :containscssにはがありますが、css3では非推奨であるため、これに依存したくありません）

  • headそのJquery行のみの要素に個別のスクリプトエントリを作成しようとしましたが、まだ目立ったちらつきがあります。

4

1 に答える 1

1

純粋なCSSでは不可能だと思います。ちらつきの影響を避けたい場合は、このアプローチをお勧めします。

js：

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

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

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

css：

li {
 display:none;
}
于 2013-01-08T11:31:40.977 に答える