はじめてのRuby on Rails、トラブル記録
<< メールへのハイパーリンク | TOP | Actionを実行したときにViewで何も表示しない方法 >>
スポンサーサイト

一定期間更新がないため広告を表示しています

posted by スポンサードリンク | | - | - | - |はてなブックマーク - スポンサーサイト
Railsでリンクをクリックすると表示/非表示切り替わるやつを作る
Rubyのコード内ではJavaScript直接書かなくてすむならできるだけ書かず、Rubyコードっぽくしておきたいです。

正式な機能名があるのかどうか知りませんが、こうリンクをクリックするとその下の説明文が開いたり閉じたりして表示/非表示できるやつ。あれをlink_to_functionでやる方法を調べたのでメモっておきます。

すべてviewの中の記述です。
<dl>
<dt><%= link_to_function('質問1') {|page| page[:question1].toggle()} %></dt>
<dd style="display: none;" id="question1">答え1</dd>

<dt><%= link_to_function('質問2') {|page| page[:question2].toggle()} %></dt>
<dd style="display: none;" id="question2">答え2</dd>
</dl>


link_to_functionはリンクにJavaScriptの機能をつけるときに使います。onClickとか。
質問1をクリックすると、答え1が開いて見えるようになります。

{|page| page[:hogehoge].toggle()}部分はコピペでOK。

hogehoge部分を、表示/非表示切り替えたい要素のidにします。
ここではddを使ってるけど、divとか他のものでも大丈夫。
あと、デフォルトでCSS、display: noneをつけているのでこの場合は最初閉じた状態でリンクをクリックすると開くけど、display: noneを入れなければ最初開いた状態で、クリックすると閉じます。

いずれの場合もクリックするたびに開いたり閉じたり。
toggleをshowとかhideにすると、押すたびに切り替わりでなくて、showするだけかhideするだけの似たようなのが作れます。状況に応じて使い分ければいいかな。
posted by トモト | 16:55 | Rails小ネタ | comments(0) | trackbacks(0) |はてなブックマーク - Railsでリンクをクリックすると表示/非表示切り替わるやつを作る
スポンサーサイト
posted by スポンサードリンク | 16:55 | - | - | - |はてなブックマーク - スポンサーサイト
コメント
コメントする










この記事のトラックバックURL
http://hajimete-ruby.jugem.jp/trackback/53
トラックバック
Rails3レシピブック 190の技
Rails3レシピブック 190の技
ついにRails3対応版が出ました!!
WEB+DB PRESS Vol.58
WEB+DB PRESS Vol.58
Rails2系から3への移行時に知りたいことがひとまとまりになっててよかった!色々ググるよりこれを読む方が早い。
Rubyレシピブック 第3版 303の技
Rubyレシピブック 第3版 303の技
Rubyやるならこのリファレンスは必要。
Search this site