0

这里的 pastebin 链接：http: //pb.gizmokid2005.com/o8s（每个参考文献中的数字指的是粘贴中的行）。

我找到了一个与我在 stackoverflow[1] 上尝试做的事情非常相似的答案。

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

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

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

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

相关代码片段：

页面/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';
}

如果有任何问题，请对这篇文章表示抱歉（第一篇文章和 <10 代表也是如此）。我希望像示例一样使用现有的 apis/jQuery 来处理这个问题，但是这个问题让我很难过，并且没有多少搜索返回它的原因。

4

1 回答 1

0

看起来，一旦元素展开，Bootstrap 就会删除类“collapse”，所以

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

从未真正存在过。

试试这个：

.in + a.btn.btn-success.showdetails:before {
    content: "Hide Details";
}
于 2014-01-29T04:02:51.293 回答