2012-09-17 16 views
6

タイトルに指摘されているように、私の質問は非常に単純です:ヘッダー(タイトル)をクリックして関連するテキストを展開(折りたたむ)それと、JavaScriptやjQueryを使わずに?これを行うブラウザ互換の方法はありますか(IE 6+証明)?JavaScript/jQueryを使用せずにヘッダーをクリックしてテキストを展開します

私は非常に単純なHTML + CSSサイトを会議用に作成しましたが、必要な場合にのみJSを使いたいと思います。だから、もちろん、互換性のある方法で、HMTL/CSSだけに固執することができるかどうかを尋ねています。

私が見つけた解決策は、ブラウザのバージョンによって古いか互換性がありません。

は、どうもありがとうございまし ジョアン

+0

あなたの唯一の選択肢は、HTML5またはJavaScriptです。どちらもあなたの条件の1つに違反しています。 – Samuel

+0

@Samuel:HTML5はどのような条件に違反しますか? – daGUY

+0

IE6のサポート – Samuel

答えて

9

IE6-proof純正CSSソリューション?

NO

[彼らはマラソンを実行させることを試みてはいけない、彼らの墓で死んで、残りを残します。あなたはこのようなことを行うにはIE6のために求めているとき、それはあなたがやっていることだ。]


IE7/8?

はい、1つの解決策があります(原則はthis older demo of mineで使用されているものと同じです)が、永続的ではありません(ページの他の場所をクリックすると展開されたコンテンツは崩壊します)。ちょっと変わったIE7(あなたのコンテンツを拡大するためにクリックした後にクリックした要素にマウスを置かなければならないという意味です)。


IE9 +および他のブラウザ

はい!また、永続的です。私が使用したものと同じ原理here


JavaScript/jQueryメソッド?

はい!参照:a jQuery version of the same demo

+0

明確な答えAnaさん、ありがとうございます。残念ながら、今日でもIE 6を使用している人がいるので、考慮する必要があります。私が思ったように、私は本当にJSを使用する必要があります。 – jaff

+0

jQueryがIE6,7,8のサポートを中止していることを考慮してください(使用するjQueryバージョンを自動更新しないように注意してください)。 JavaScriptを使用する場合は、jQueryを推奨します。 IEはまともですが、IE6と7用の純粋なJavaScriptを書くことが頭痛の原因です。 – Ana

+0

あなたはおそらくこのようなものがほしいでしょうhttp://codepen.io/thebabydino/pen/ByrAa – Ana

3

をあなたはクロスブラウザをサポートしているだけでHTML & CSSでシンプルなホバードロップダウンメニューの操作を行うことができます

http://jsfiddle.net/fkS2z/

あなたはフェードでこれを改善することができますか

http://jsfiddle.net/N9fDy/1/

012のCSSトランジションをサポートしています

クリックするだけではありません。

+0

こんにちは、StewD。私はいくつかのIEバージョン(いつものように...)との互換性の問題を抱えていると思いますが、HMTL + CSSだけを使用しているのでJSを選びます。それでも、ありがとう! – jaff

関連する問題