javascript - toggle() Accordion 脚本不工作

Question

我遇到了一个障碍，似乎无法理解为什么这个脚本不能在我的测试页上运行。我有 jquery 链接，然后是这个脚本。这是我唯一的脚本，所以我知道它不是 js 冲突。在这里 fiddle :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

您的问题(在实际示例中)是您在加载 DOM 之前运行您编写的 JS 脚本(在 HEAD 部分)。

一个简单的解决方法是让该脚本仅在文档准备好后运行。您只需将其输入 document.ready() 即可实现。

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

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