0

以下のコードでは、ヘッダーをクリックすると関連するコンテンツを取得できます。しかし、問題は、ページの読み込み時にすべてのヘッダーとコンテンツが表示され、ヘッダーをクリックした後にのみ、他のコンテンツが消えることです。そうであってはなりません。

ページの読み込み時に、ヘッダーのみが表示されるはずです...どのように?

<span>Click a Header!</span>
<div><h2>Sub Header 1</h2></div><div>Content 1</div>
<div><h2>Sub Header 2</h2></div><div>Content 2</div>
<div><h2>Sub Header 3</h2></div><div>Content 3</div>

<script language="javascript">

      $("h2").click(function () 
      {
          $("h2").not(this).parent().next().hide();
          $(this).parent().next().show();
      }); 
</script>
4

3 に答える 3

4

コードが書かれているように、DOM が読み込まれる前にコードが実行される可能性は十分にあります。典型的なアプローチは、DOM が完全にロードされ$(document).ready()た.readyときに実行する関数を指定するために使用されます。

$(document).ready(function(){
     $("h2").click(function () 
      {
          $("h2").not(this).parent().next().hide();
          $(this).parent().next().show();
      }); 
}

より詳細な説明については、jQuery の優れたドキュメントを確認することをお勧めします。

ロード時に非表示になると予想されるコンテンツが表示されている場合は、次のようにスタイルを設定する必要がありますdisplay:none

表示したくない div にクラス (たとえばhideOnLoad) を指定し、CSS で可視性属性を設定するか、ロード時に jquery を使用します。

例えば

$('.hideOnLoad').hide();
于 2012-06-19T03:28:24.073 に答える
1

ページの読み込みでコンテンツを非表示にする必要があります。次の手順を試してください。それはあなたに役立つかもしれません

$(document).ready(function(){
 $("h2").parent().next().hide();  
});
$("h2").click(function (){
 $("h2").not(this).parent().next().hide();
 $(this).parent().next().show();
 });
于 2012-06-19T03:51:42.540 に答える
1

少し異なるマークアップを提案する場合、物事ははるかに簡単になります (もう必要あり.not(this).parent().next()ません)。

<span>Click a Header!</span>
<div><h2>Sub Header 1</h2><div class="content">Content 1</div></div>
<div><h2>Sub Header 2</h2><div class="content">Content 2</div></div>
<div><h2>Sub Header 3</h2><div class="content">Content 3</div></div>

そして、あなたが持っているマークアップのすぐ下、またはdocument.ready（推奨）にあるjavascript：

$('.content').hide();
$('h2').click(function(){
   $('.content').hide(); 
   $(this).next('.content').show();
});​

http://jsfiddle.net/k2g8g/

于 2012-06-19T03:33:35.947 に答える