Question

在这里使用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';
}

对于这篇文章感到很抱歉，如果有任何关闭（第一篇文章和＆lt; 10 rep）。我希望使用现有的apis / jQuery来处理这个问题，但是这个问题让我感到困惑，没有多少搜索返回原因。

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";
}

Bootstrap jQuery按钮＆amp;单击以切换文本/输入字段

1 个答案: