使用 jQuery / JavaScript 展开/折叠答案

【问题标题】：expand/collapse using jQuery / JavaScript使用 jQuery / JavaScript 展开/折叠
【发布时间】：2015-02-15 03:11:31
【问题描述】：

我尝试使用 Nishutosh Sharma 的 that jQuery function（第 2 篇文章）来折叠和展开我的侧边栏。现在它不起作用，但我找不到错误。你能帮帮我吗？

我的 JavaScript 中的函数

function expandList(){
    $("#samples").attr("collappsed", "expanded");
}

这是我的 HTML：

<div id="samples" class="collappsed" onclick="expandList()">
    <ul id="sample-list" class="list"></ul>
</div>

这是我的 CSS：

.expanded {
    left: 0px;
}

.collappsed {
    left: -130px;
}

更多关于它的 css 找到 in this fiddle

【问题讨论】：

您正在添加一个名为“collappsed”的属性，其值为“expanded”。请注意，您引用的帖子中的语法是：.attr("class", "class-name-you-want-to-assign"); 第一个参数是您要更改的属性的名称，在您的情况下应该是“类”。查看attr() 的文档。也可以使用jQuery的addClass()、removeClass()、toggleClass()等
错误是：它不起作用:)我想转学。因此对于 id 样本，该类不再“折叠”，而是“扩展”。所以如果我做对了，我的语法就行不通了？可能“toggleClass()”类在这里会更好？

【解决方案1】：

collapsed 不是属性。它是class 属性的值。

function expandList(){
    $("#samples").toggleClass("collappsed expanded");
}

【讨论】：