• 更新:
  • 投稿:
  • カテゴリィ:

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>
&nbsp;
<a href="<$MTEntryPermalink$>#more" title="&quot;<$MTEntryTitle$>&quot;の続きを読む">&quot;<$MTEntryTitle$>&quot;の続きを読む</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>
&nbsp;
<a href="<$MTEntryPermalink$>#more" title="&quot;<$MTEntryTitle$>&quot;の続きを読む">&quot;<$MTEntryTitle$>&quot;の続きを読む</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) さんのおかげで、シンプルで美しい物になりました。

ブログやっていて良かったなー、とつくづく思いました。これからも(なるべく)頑張って更新します。

[2] このページの一番上へ戻る