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

您的问题（在实例上）是您在加载DOM之前运行您编写的JS脚本（在 HEAD 部分中）。

一个简单的解决方法是在文档准备好之后才使该脚本运行。只需将其输入document.ready()

即可实现此目的

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

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

toggle（）手风琴脚本不起作用

1 个答案: