折りたたみメニューで Javascript が Off でも 追記部分を表示!!

シェアする

[HINAGATA:HINAGATAでの折りたたみメニュー](http://hinagata.biz/log/2004/09/16/0144.html “HINAGATA:HINAGATAでの折りたたみメニュー”)や[Ogawa::Memoranda: Javascriptでの表示・非表示切り替え](http://as-is.net/blog/archives/000907.html#more “Ogawa::Memoranda: Javascriptでの表示・非表示切り替え”)を見て、自分も[亜細亜ノ蛾 – ヘッドライン](http://asiamoth.com/headline/ “亜細亜ノ蛾 – ヘッドライン”) では追記部分を隠すようにしてみた。
しかしこれだと、Javascript を Off にしている場合、追記部分が表示されないので、以下のようにするといいな、と思った。


[HINAGATA](http://hinagata.biz/log/2004/09/16/0144.html “HINAGATA: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) さんのおかげで、シンプルで美しい物になりました。

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

コメント

  1. Kaminogoya より:

    おお!グッジョブです!
    しかし、
    <script type="text/javascript">
    document.write(‘<div id="more" class="hidden">’);
    </script>
    の方がよいのでは?
    scriptタグには、type属性が必要だし、language属性は別になくてもいいし、コメントアウトはしないで良いとおもいます!
    しかし素敵!

  2. (o) より:

    divの対応が取れていないのでHTML的にいやな感じがします。以下のようにするとよりシンプルになると思いますよ。
    <script>document.write(‘<div class=”hidden”>’);</script>
    <div id=”more”><$MTEntryMore$></div>
    <script>document.write(‘</div>’);</script>

  3. asiamoth より:

    ああ、そうですよね。とほ。
    自分は「document.write」の使い方すら知らないまま、調べながら書いたので……。
    さっそく修正しました。
    ありがとうございます!!

  4. kaminogoya より:

    (o)さんの修正案に追加させていただくと、
    scriptには文法上type="text/javascript"が必要ですよ〜!

  5. (o) より:

    ええ、もちろん簡単のために省略して書きました。本当のところを言うと、HTMLに内包されるJavascript内で<div>などと書くこともW3C的には正しくないです。
    守る必要はないルールだと思いますけれど。