首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >切换()折叠脚本不起作用

切换()折叠脚本不起作用
EN

Stack Overflow用户
提问于 2013-08-24 07:26:43
回答 1查看 228关注 0票数 0

我遇到了一个障碍,似乎不能理解为什么这个脚本不能在我的测试页面上运行。我有jquery链接,后面跟着这个脚本。这是我唯一的脚本,所以我知道这不是js冲突。小提琴在这里:http://jsfiddle.net/dXWAY/7

代码语言:javascript
运行
复制
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>
EN

回答 1

Stack Overflow用户

发布于 2013-08-24 08:19:31

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

一个简单的解决方法是使该脚本仅在文档准备好之后运行。您只需将其输入到document.ready()中即可完成此操作

代码语言:javascript
运行
复制
<script>
$(document).ready(function () {
    var content = $('.content').hide();

    $('.toggleBtn').on('click', function() {
        $(this).next('.content').slideToggle();
        return false;
    });
 });
</script>
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/18413291

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档