처리 페이지 Jquery를 사용하여 OnLoad 하시겠습니까?

Question

아래 코드에서 헤더를 클릭하면 관련 콘텐츠를 얻을 수 있습니다. 하지만 문제는 페이지로드시 모든 헤더와 내용을보고 있으며 헤더 만 클릭하면 다른 내용은 사라집니다. 그렇게해서는 안됩니다.

페이지로드시 머리글 만 표시됩니다 ... 어떻게?

<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> 

Answer 1

페이지로드에서 컨텐츠를 숨겨야합니다. 다음을 수행하십시오. none`가 아닌`공개 설정 : 그것은 당신이 당신은`디스플레이 사용할 필요가

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

Answer 2

코드가 작성된대로 DOM이로드되기 전에 실행될 가능성이 큽니다. 일반적인 접근 방법은 $(document).ready()입니다. .ready 이벤트는 DOM이 완전히로드 될 때 실행할 함수를 지정하는 데 사용됩니다.

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

나는 더 심층적 인 설명은 jQuery의 excellent documentation 체크 아웃 추천 할 것입니다. 당신은 당신이 부하에 숨겨져있을 것으로 기대 컨텐츠가 표시되는 경우

, 당신은 (말하자면 hideOnLoad을)이 표시 원하지 않는 클래스를 div의를 부여 display:none

과 스타일을 필요 중 하나 세트 CSS에서 visibility 속성을 사용하거나 jquery를로드 할 때 사용합니다.

나는 약간 다른 마크 업을 제안 할 수있는 경우

$('.hideOnLoad').hide(); 

Answer 3

는 일이 (더 이상 .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에 (권장)을했거나 :

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

http://jsfiddle.net/k2g8g/