单击后如何更改展开div并在再次单击后折叠它？

Question

我有一个使用Simple-expand创建的可解释/可折叠元素  （用于展开/折叠元素的jQuery插件）。

我想要做的是在用户点击它时展开元素的css，展开它，并在用户再次点击它时再次更改它，然后折叠它。

问题是，我不知道该怎么做。我知道如何在点击时更改课程，但是如何在用户＆＃34; unlicked＆＃34;之后更改CSS？这个标签它缩小了吗？

编辑：感谢乔治纠正我想做的事情，更清楚。我有点累，所以我很快就需要它。我知道这是非常糟糕的借口，但我完全理解和尊重你们，他们给了我负面的反馈。

基本上我需要的是：

• 有6个不同的div;
• 当您点击一个div时，它会展开;
• 当你点击另一个div时，它会检查是否有任何这些div被扩展，如果是 - 关闭（折叠）它们，然后打开我点击的div。

对于那个简单的任务（它非常简单，它只是我是愚蠢的）我需要使用jQuery this语句和一些if。＃/ p>

我在这里发布这篇文章后15分钟后发现了一个解决方案，我想删除它，不幸的是，我不能，因为它有答案。

感谢所有试图帮助我的人，感谢您的帮助。

干杯！

Answer 1

只需在展开元素时使用一个类，然后toggleClass()在点击时切换类

$( ".your_element" ).click(function() {
  $( this ).toggleClass( "expanded" );
});

Answer 2

fiddle Demo

<强> CSS

.active {
    background-color: #CC0000;
    font-weight:bold;
    color:#FFFFFF;
}

<强>的jQuery

$('#button').click(function () {
    $("#colormethis").toggleClass('active');
});

使用jQuery使用活跃于toggleClass的类 这是你如何改变CSS。所以尝试用自己的代码制作它。

Answer 3

您可以使用materialize css collapsible link