追記文章の折りたたみ(閉じた時にページトップに戻る方法)
オーソドックスなカスタマイズとして、昔紹介した「追記文章の折りたたみ用スクリプト(改)」ですが、「折りたたみを閉じた時にページトップに戻る方法はないでしょうか」というご質問を頂きましたので、本エントリーでその方法を紹介致します。
1.方法
実は、下記リンクに示すオリジナルのスクリプト、
は、閉じた時にページトップに戻る動作になっており、「追記文章の折りたたみ用スクリプト(改)」は、それをトップに戻らないように変更したものです(そのことを忘れてました、すいません)。
したがってオリジナルの内容に戻せば期待する動作になりますので、追記部分のMTタグの赤色部分の "false
"
<MTEntryIfExtended>
<div id="Link<$MTEntryID$>">
<a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,'<$MTEntryPermalink$>',this);return false;">続きを読む ≫</a>
</div>
<div id="Text<$MTEntryID$>" style="display: none">
<$MTEntryMore$>
<a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,0,this);return false;">≪ 続きを隠す</a>
</div>
</MTEntryIfExtended>
を、青色の "true
" に修正してください。
<MTEntryIfExtended>
<div id="Link<$MTEntryID$>">
<a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,'<$MTEntryPermalink$>',this);return false;">続きを読む ≫</a>
</div>
<div id="Text<$MTEntryID$>" style="display: none">
<$MTEntryMore$>
<a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,0,this);return true;">≪ 続きを隠す</a>
</div>
</MTEntryIfExtended>
2.備考
このように、onclick
属性で実行されたスクリプトの戻り値が true
(ここでは "return true;
" と記述されている部分が該当)であれば、href
属性に記述された URL に遷移します。
折りたたみを開いた時にページトップに遷移しないのは、開く時の onclick
属性の最後に "return false;
" と記述されているからです。
ちなみにこのカスタマイズをエントリーしたのが約2年半前。乏しい知識の中で折りたたみ動作がうまくカスタマイズできた時の喜びは今でも覚えています。
で、「今なら Ajax もありだな」と思い立ったので、明日は Ajax 版を公開したいと思います。
Posted by yujiro このページの先頭に戻る
- 本文と追記を切り替える Web2.0(折りたたみの先頭位置にジャンプ)
- 本文と追記を切り替える Web2.0
- エントリー・アーカイブの追記文章の折りたたみ(改)
- 個別アーカイブに「続きを読む」を導入
- 追記文章の折りたたみ用スクリプト(改)
トラックバックURL
コメントする
greeting