Javascript 如何在单击后展开div并在再次单击后将其折叠？

我有一个可解释/可折叠的元素，我使用 （用于展开/折叠元素的jQuery插件）

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

问题是，我不知道怎么做。我知道如何在单击时更改类，但在用户“取消”此选项卡并使其缩小后，如何更改CSS

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

基本上我需要的是：

• 有6个不同的分区
• 当您单击一个div时，它将展开
• 当您单击另一个div时，它将检查这些div是否已展开，如果是-关闭（折叠）它们，然后打开我单击的div

对于那个简单的任务（其实很简单，只是我太笨了），我需要使用jQuery

这个

语句和一些if

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

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

---

干杯

只需在元素展开时使用一个类，然后单击

toggleClass（）

即可切换该类

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

---

只需在元素展开时使用一个类，然后单击

toggleClass（）

切换该类即可

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

---

您可以使用materialize css可折叠

您可以使用materialize css可折叠

CSS

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

jQuery

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

使用活动类而不是使用jQuery 这就是更改CSS的方法。所以试着用你自己的代码来实现它。

CSS

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

jQuery

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

使用活动类而不是使用jQuery

---

这就是更改CSS的方法。因此，请尝试在您自己的代码中创建它。

为什么不将css添加到一个特殊类：.special{}并动态添加该类？“不能发布JSFIDLE链接…”这是有原因的。相反，与其围绕它工作，不如按照网站的工作方式工作：你的问题的全部内容必须在你的问题中，而不仅仅是链接。链接会腐烂，使得问题及其答案对未来的人们来说毫无用处，人们不应该非得离开网站去帮助你。提出一个问题，最好使用堆栈片段（工具栏按钮）使其可运行。更多：只需使用JavaScript进行更改。单击事件“取消单击”我不清楚，你是指鼠标向下/mouseup，还是单击展开，然后再次单击折叠？编辑了答案，很抱歉不清楚。为什么不将css添加到特殊类：。特殊{}并动态添加该类？“无法发布JSFIDLE链接…”这是有原因的。相反，与其围绕它工作，不如按照网站的工作方式工作：你的问题的全部内容必须在你的问题中，而不仅仅是链接。链接会腐烂，使得问题及其答案对未来的人们来说毫无用处，人们不应该非得离开网站去帮助你。提出一个问题，最好使用堆栈片段（工具栏按钮）使其可运行。更多：只需使用JavaScript进行更改。然后在窗口上取消更改。单击事件“取消单击”我不清楚，您是指鼠标向下/鼠标点击，还是单击展开，然后再次单击折叠？编辑了答案，很抱歉不清楚。@PauliusK:那么，您的计划是继续忽略网站的工作方式，而不是解决问题？@PauliusK我试图编辑你的问题，以便更清楚地了解你想要什么。如果我的答案帮助你解决了问题，你可以将你的问题标记为已回答。谢谢Hanks George，我将你的答案标记为正确答案。@PauliusK:所以，你的计划是继续忽略网站应该如何工作，而不是解决问题？@PauliusK我试图编辑你的问题，以便更清楚你想要什么。如果我的答案帮助你解决了问题，你可以将你的问题标记为已回答。谢谢Hanks George，我将你的答案标记为正确答案。