토글() 아코디언 스크립트가 작동하지 않습니다.

Question

저는이 문제로로드 블록을 돌았는데 왜 내 스크립트가 내 테스트 페이지에서 실행되지 않는지에 관해 머리를 감싸고있는 것처럼 보일 수 없습니다. jquery가 링크되어 있고,이 스크립트가 이어져 있습니다. 이것은 js 충돌이 아니라는 것을 알기 때문에 이것은 나의 유일한 스크립트입니다. 여기 바이올린 : DOM을로드하기 전에 (라이브 예에) http://jsfiddle.net/dXWAY/7

var content = $('.content').hide(); 

$('.toggleBtn').on('click', function() { 
    $(this).next('.content').slideToggle(); 
    return false; 
}); 

.toggleBtn { 
    background:deepskyblue; 
    display:block; 
    float:Left; 
    width:100%; 
    padding:10px; 
    border-bottom:1px solid #ccc; 
    border-top:1px solid #fff; 
    color:#fff; 
    cursor:pointer; 
} 

.content { 
    background:skyblue; 
    float:left; 
    overflow:hidden; 
    width:100%; 
    padding:10px; 
} 

<a class="toggleBtn">Click Me!</a> 

<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore accusamus porro modi ut itaque ipsum natus explicabo vero sequi beatae libero voluptatibus sit culpa debitis tempore! Sint eum ipsum consequatur!</div> 

Answer 1

귀하의 문제는합니다 (HEAD 섹션에서) 당신이 작성한 JS 스크립트를 실행하는 것입니다.

간단한 수정은 문서가 준비된 후에 만 ​​스크립트를 실행하는 것입니다. 당신은 단순히 라이브 작동하지 않습니다 document.ready()

<script> 
$(document).ready(function() { 
    var content = $('.content').hide(); 

    $('.toggleBtn').on('click', function() { 
     $(this).next('.content').slideToggle(); 
     return false; 
    }); 
}); 
</script>