toggle（）手風琴腳本不能正常工作

Question

我遇到了這個問題，並且似乎無法包裝我的頭，因爲這個腳本不能在我的測試頁上運行。我有jQuery鏈接，後面是這個腳本。這是我唯一的腳本，所以我知道它不是js衝突。小提琴這裏：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

您的問題（在活生生的例子）是你運行你寫的JS腳本（在HEAD部分）加載DOM之前。

一個簡單的解決方法是在文檔準備好後才能運行該腳本。你可以簡單地把它進入到document.ready()

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

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