NEW  |  HOME  |  OLD

IEでコメントリスト開閉をクリック時の不具合

一部のブログさんで使われているコメントリスト開閉ですが、
最近IEではコメントリスト開閉をクリックするとページの一番上に移動してしまうようになったようです。
下に自分の使っていたものを貼ってみました。
強調している部分が原因だと思われる部分です。

<!--▼コメントリスト-->
<!--not_permanent_area-->
<div class="c-list_body">
<p class="entry-more">
<a href="#" onclick="i=this.parentNode.parentNode.lastChild;i.style.display=['none',''][(i.flag=!i.flag)+0];return false" onkeypress="this.onclick" title="コメントリストを開閉する">コメントリストを開閉する</a>
</p>
<div class="c-list_text" id="c-list<%topentry_no>" style="display: none;">
<dl class="comment-list">
<!--comment_list-->
<dt>  <!--[<%topentry_comment_list_title>] by -->【<%topentry_comment_list_name>】</dt>
<dd><%topentry_comment_list_brbody></dd>
<!--/comment_list-->
</dl>
</div>
</div>
<!--/not_permanent_area-->
<!--▲コメントリスト-->

以前はIEもhref="#"だった場合はページ移動をしなかった記憶ですが、
最近移動してしまうようになったようです。
そこでhrefがあるとページ移動しようとしてしまうのでこれを取り除きました。
そして、そのままだとカーソルを合わせてもカーソルの形が変化しない事と文字色が通常の文章と同じため、
開閉できることが分かりにくくなってしまうので以下のようにしました。
【簡易版】
<!--▼コメントリスト-->
<!--not_permanent_area-->
<div class="c-list_body">
<p class="entry-more">
<a style="cursor:pointer;color:gray;border-bottom:1px solid gray;" onclick="i=this.parentNode.parentNode.lastChild;i.style.display=['none',''][(i.flag=!i.flag)+0];return false" onkeypress="this.onclick" title="コメントリストを開閉する">コメントリストを開閉する</a>
</p>
<div class="c-list_text" id="c-list<%topentry_no>" style="display: none;">
<dl class="comment-list">
<!--comment_list-->
<dt>  <!--[<%topentry_comment_list_title>] by -->【<%topentry_comment_list_name>】</dt>
<dd><%topentry_comment_list_brbody></dd>
<!--/comment_list-->
</dl>
</div>
</div>
<!--/not_permanent_area-->
<!--▲コメントリスト-->

style="cursor:pointer;color:gray;border-bottom:1px solid gray;"
cursor:pointer;でカーソルの形を変え、color:gray;で文字色を灰色にし、border-bottom:1px solid gray;で1ピクセルの単線の灰色の下線を引いています。


もう少しCSSの知識が要りますが、
マウスカーソルを文字列に合わせた時(マウスーオーバー時)に文字色が変更することも再現する場合は
【CSS版】
<!--▼コメントリスト-->
<!--not_permanent_area-->
<div class="c-list_body">
<p class="entry-more">
<a class="comment_list_hover" onclick="i=this.parentNode.parentNode.lastChild;i.style.display=['none',''][(i.flag=!i.flag)+0];return false" onkeypress="this.onclick" title="コメントリストを開閉する">コメントリストを開閉する</a>
</p>
<div class="c-list_text" id="c-list<%topentry_no>" style="display: none;">
<dl class="comment-list">
<!--comment_list-->
<dt>  <!--[<%topentry_comment_list_title>] by -->【<%topentry_comment_list_name>】</dt>
<dd><%topentry_comment_list_brbody></dd>
<!--/comment_list-->
</dl>
</div>
</div>
<!--/not_permanent_area-->
<!--▲コメントリスト-->

とし、外部スタイルシートに

a.comment_list_hover{
cursor:pointer;
color:#AAAAAA;
border-bottom:1px solid #AAAAAA;
}
a:hover.comment_list_hover{
color:black;
border-bottom:1px solid black;
}

を書き加えるとできます。(倉庫の設定ではgrayではなく#AAAAAAだった)
comment_list_hoverは他のクラス名とかぶらなければ何でもいいです。
他の汎用的なa:hoverとの頭を避けるため、スタイルシートの一番下に書き加えるのがいいかもしれません。
試した範囲ではa:hover.comment_list_hoverでもa.comment_list_hover:hoverでも良いようでした。
正しいほうがあり、それを知っている方がいらっしゃればお知らせください。

おかしな点を見つけた方やより良い方法を知っておられる方は是非報告してください。

NEW  |  HOME  |  OLD

Comment

コメントの投稿


管理者にだけ表示を許可する

Trackback

http://kyoakumugenirc.blog61.fc2.com/tb.php/2240-ffabaab0

NEW  |  HOME  |  OLD

 検索フォーム


 全記事表示リンク

 全記事表示(500件ずつ)


 プロフィール

vesper

Author:vesper

IRCチャンネルの
#凶悪MUGEN
#凶悪MUGEN_雑談
のログからMUGENに関するものを編集・公開しています。
修正した方が良い箇所があった場合は知らせてもらえると助かります。
MUGEN界隈からはリンクフリーです。
その他からのリンクはご遠慮ください。
このブログをリンクに追加

IRCへの入り方などは
IRCに関する記事
をご覧ください。

簡易凶悪MUGEN IRC情報
・ホスト名
 [irc.friend-chat.jp]
・ポート番号
 [6664]
・チャンネル名
 [#凶悪MUGEN]
 [#凶悪MUGEN_雑談]
 (以下はお好みで)
 [#凶悪MUGEN_艦これ]
 [#凶悪MUGEN_スマブラ]
 [#凶悪MUGEN_麻雀]
 [#凶悪MUGEN_緋想天]
 [#凶悪MUGEN_アカツキ]
 [#凶悪MUGEN_小説]
 [#凶悪MUGEN_絵チャ]

・推奨IRCクライアント
 LimeChat2


 カテゴリ

記述の子カテゴリは目安程度に考えてください。

 最新コメント


 最新記事


 カウンター

累計の閲覧者数:

現在の閲覧者数:

 RSSリンクの表示


他ブログ更新情報(最新70件)

仕様上、下記のリンク一覧でサイトリンクにあるサイトはこの一覧に出ません。

Twitter


基礎リンク集


リンク

サイトに断り書きがない限りリンクさせてもらっています。
リンクしてほしくない場合はお気軽におっしゃってください。