September 17, 2004
折りたたみメニューで Javascript が Off でも 追記部分を表示!!
- 更新: 2007 年 03 月 04 日 15:36
- 2004 年 09 月 17 日 14:03 に asiamoth が投稿
- カテゴリー: Movable Type
- コメント (5)
HINAGATA:HINAGATAでの折りたたみメニューやOgawa::Memoranda: Javascriptでの表示・非表示切り替えを見て、自分も亜細亜ノ蛾 - ヘッドライン では追記部分を隠すようにしてみた。
しかしこれだと、Javascript を Off にしている場合、追記部分が表示されないので、以下のようにするといいな、と思った。
HINAGATAでのオリジナルソース (コー●とかカゴ●ではなく) はこのようになっている。
<MTEntryIfExtended>
<p class="extended">
<span onclick="toggleWithClass(this,'hidden','none')" onkeypress="toggleWithClass(this,'hidden','none')" title="Expand">▼</span>
<a href="<$MTEntryPermalink$>#more" title=""<$MTEntryTitle$>"の続きを読む">"<$MTEntryTitle$>"の続きを読む</a>
</p>
<div id="more" class="hidden">
<$MTEntryMore$>
</div>
</MTEntryIfExtended>
これに、以下を追加してみる。
(省略)
<div id="more" class="hidden">
<$MTEntryMore$>
</div>
<noscript><!--Javascript が Off の場合は、-->
<$MTEntryMore$><!--改めて MTEntryMore を表示する -->
</noscript><!--Javascript が On の場合、この内容は表示されない -->
</MTEntryIfExtended>
しかし、この場合は Javascript を On にしている環境では画面に表示されないが、ページのサイズは無駄に肥大している (MTEntryMore が二回読み込まれる)。効率が悪い。そこで、こうするとどうだろう ? (助言をいただき、さっそく修正しました。コメント参照)
<MTEntryIfExtended>
<p class="extended">
<span onclick="toggleWithClass(this,'hidden','none')" onkeypress="toggleWithClass(this,'hidden','none')" title="Expand">▼</span>
<a href="<$MTEntryPermalink$>#more" title=""<$MTEntryTitle$>"の続きを読む">"<$MTEntryTitle$>"の続きを読む</a>
</p>
<script type="text/javascript">document.write('<div class="hidden">');</script>
<div id="more"><$MTEntryMore$></div>
<script type="text/javascript">document.write('</div>');</script>
要するに、Javascript が On の環境では document.write が働いて、<div id="more" class="hidden"> になる。
Javascript が Off の環境では <noscript> の内容が適用されるので、<div id="more"> になる。つまり hidden にならない。
<p class="extended"> ～ </p> も、Javascript で表示させてもイイかも。
上記は、もっといい方法を教えて頂いたので、修正しました。ありがとうございます!!
まぁ、自分の環境ではうまくいっているけど……います。
自分は、Javascript の事はほとんど知らなかった人なので、ここの内容を試す場合は “自己責任” ということでお願いします。ですが、kaminogoya さんと (o) さんのおかげで、シンプルで美しい物になりました。
ブログやっていて良かったなー、とつくづく思いました。これからも（なるべく）頑張って更新します。
"折りたたみメニューで Javascript が Off でも 追記部分を表示!!"の関連記事
コメント
おお！グッジョブです！
しかし、
<script type="text/javascript">
document.write('<div id="more" class="hidden">');
</script>
の方がよいのでは？
scriptタグには、type属性が必要だし、language属性は別になくてもいいし、コメントアウトはしないで良いとおもいます！
しかし素敵！
投稿者: Kaminogoya | September 17, 2004 02:46 PM
divの対応が取れていないのでHTML的にいやな感じがします。以下のようにするとよりシンプルになると思いますよ。
<script>document.write('<div class="hidden">');</script>
<div id="more"><$MTEntryMore$></div>
<script>document.write('</div>');</script>
投稿者: (o) | September 17, 2004 04:27 PM
ああ、そうですよね。とほ。
自分は「document.write」の使い方すら知らないまま、調べながら書いたので……。
さっそく修正しました。
ありがとうございます!!
投稿者: asiamoth | September 17, 2004 04:29 PM
(o)さんの修正案に追加させていただくと、
scriptには文法上type="text/javascript"が必要ですよ〜！
投稿者: kaminogoya | September 18, 2004 01:43 PM
ええ、もちろん簡単のために省略して書きました。本当のところを言うと、HTMLに内包されるJavascript内で<div>などと書くこともW3C的には正しくないです。
守る必要はないルールだと思いますけれど。
投稿者: (o) | September 20, 2004 09:33 PM
コメントを投稿
"折りたたみメニューで Javascript が Off でも 追記部分を表示!!" にコメントを投稿することができます。お気軽にどうぞ。