jQuery slideToggle이 목록 태그에서 작동하지 않습니다.

Question

어떤 이유로 SlideToggle이 작동하지 않습니다. 내 목록 'tellusmore'가 표시되도록 설정되었습니다. none 배트를 벗어나서 'tellustoday'클래스를 클릭하면 목록을 slideToggle (표시)로 설정합니다.

<div id="tellus"> 
    <h2>Have You Used This Product?</h2> 
     <span class="tellustoday">Click Here to tell us about it!</span> 
     <ul class="tellusmore"> 
      <li id="sendreview"><a href="">Write a quick review</a></li> 
      <li id="sendpicture"><a href="">Send us pictures of your unit</a></li> 
      <li id="sendvideo"><a href="">Send us a video of your product</a></li> 
     </ul> 
</div> 

$(".tellustoday").click(function() { 
$('.tellusmore').slideToggle("fast"); 
}); 

#tellus { 
-moz-border-radius: 4px 4px 4px 4px; 
background-color: white; 
border: 1px solid #E8E8E8; 
line-height: normal; 
padding: 15px 6px 15px 6px; 
margin-bottom:10px; 
} 
#tellus h2{ 
color: #004B6C; 
font-size: 20px; 
text-transform: uppercase; 
font-family: georgia,serif; 
text-align: center; 
font-weight: bold; 
margin:5px 2px; 
} 
.tellustoday { 
color: #004B6C; 
text-decoration: underline; 
text-transform: none; 
font-weight: normal; 
font-size: 14px; 
cursor: pointer; 
} 
.tellusmore { display:none; } 

Answer 1

나를 위해 작동하는 것 같습니다 : http://jsfiddle.net/UUsBm/.

페이지에 jQuery에 대한 참조를 추가 했습니까?

페이지에 다른 JavaScript 또는 CSS가있어 충돌이 있습니까?

Answer 2

정확히 어디에서 코드를 바인딩 했습니까?

당신이 document.ready() 안에 넣을 필요가있을 수 있습니다 때문에 ... 라이브 페이지

는

$(".tellustoday").click(function() { 
$('.tellusmore').slideToggle("fast"); 
}); 

, 오류를 던지고하지, 또는 아무것도하지 않습니다 ..

slideToggle()을 호출하기 전에 alert 또는 console.log 문을 테스트하여 테스트 할 수 있습니까?

Answer 3

jQuery 준비 함수에서 HTML로 콘텐츠를 생성하는 것 같습니다. 괜찮습니다. 문제는 이벤트를 바인딩하는 자바 스크립트 코드가 별도의 <script> 태그에 있다는 것입니다. 즉, jQuery의 준비 이벤트에서 콘텐츠가 DOM에 삽입되기 전에 파싱되는 즉시 실행됩니다.

해결책은 준비 함수 내에 컨텐츠를 삽입하거나 자체 준비 기능으로 컨텐츠를 랩핑 한 직후에 이벤트 바인딩을 이동시키는 것입니다. 다중 준비 함수는 파싱 된 순서대로 실행되므로 삽입이 이벤트 바인딩 전에 구문 분석되는지 확인하십시오.

DOM을로드하기 전에 jQuery 함수를 사용하는 것이 좋습니다. 즉, 일부 스크립트를 즉시 실행하고 준비된 함수로 래핑하려는 경우에도 마찬가지입니다. 이렇게하면 DOM과 jQuery가 완전히로드됩니다. 단순화를 위해 $(function(){...}을 사용하십시오.