0

ここのペーストビンのリンク: 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>

カスタム.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.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 に答える