引导 jQuery 按钮并单击以切换文本/输入字段

Question

此处 pastebin 中的链接：http://pb.gizmokid2005.com/o8s（每个 ref 中的数字指的是粘贴中的行）。

我在 stackoverflow[1] 上找到了一个非常相似的答案。

简而言之，我想要一个我可以使用的按钮，其中的文本也会切换，当它被点击时，它将切换一些文本/字段以显示/隐藏。

我的整个应用程序都在这里[2]，我在此处为页面索引中的按钮添加了特定代码 [3]。我使用的 CSS 可以在 custom.css.scss[4] 中找到。

我的 heroku 开发站点是 http://s.g2k5.us。如果您加载该网站，您会注意到该按钮与“显示详细信息”文本正确显示，但如果您单击它，文本会消失，即使切换正常工作也是如此。

我遇到的另一个问题是，如果我将按钮代码移动到我要切换的字段之前，即 - 将 /pages/index.html.erb 中的第 41 行移动到第 29 行之前，按钮文本根本不起作用。

相关代码sn-ps：

pages/index.html.erb[3]

<div class="collapse-group">
<div class="collapse" id="viewdetails">

<div class="form-group col-md-6">
  <%= f.label :title %><br>
  <%= f.text_field :title, class: "form-control" %>
</div>
<div class="form-group col-md-6">
  <%= f.label :short %><br>
  <%= f.text_field :short, class: "form-control" %>
</div>

</div>
<a class="btn btn-success showdetails" data-toggle="collapse" data-target="#viewdetails"></a>
</div>
</div>

custom.css.scss[4]

.collapse.in+a.btn.btn-success.showdetails:before
{
    content:'Hide details';
}
.collapse+a.btn.btn-success.showdetails:before
{
    content:'Show details';
}

如果有任何问题，请对这篇文章感到抱歉（第一篇文章和

Answer 1

看起来 Bootstrap 会在元素展开后删除“collapse”类，所以

.collapse.in+a.btn.btn-success.showdetails:before
{
    content:'Hide details';
}

实际上从未存在过。

试试这个：

.in + a.btn.btn-success.showdetails:before {
    content: "Hide Details";
}