Chrome/SafariでCSSアコーディオンメニューが機能しない

Question

クリックすると表示/非表示にする簡単なアコーディオンスタイルのメニューを作成する必要があります。 IE11とFFで動作しますが、Chrome/Safariでは終了しません。誰もがこれらのブラウザのための回避策を提供することはできますか？私はこのコードの単純さが好きで、可能であればそれを使用したいと思います。ありがとう！

.show{ 
 
    display:none; 
 
} 
 
.hide:focus+.show{ 
 
    display:inline; 
 
} 
 
.hide:focus{ 
 
    display:none; 
 
} 
 
.hide:focus~#list{ 
 
    display:none; 
 
}

<p>Accordian Example</p> 
 
<div> 
 
    <a href="#" class="hide">[hide]</a> 
 
    <a href="#" class="show">[show]</a> 
 
    <ol id="list"> 
 
     <li>item 1</li> 
 
     <li>item 2</li> 
 
     <li>item 3</li> 
 
    </ol> 
 
</div>

Answer 1

私はFFとChromeで確認しています。要素がnoneにそのdisplayプロパティが設定されているとき、Chromeの場合

異なる動作のための

理由は、それは私がより予測可能かつ均一な行動であると信じている、合焦状態にすることはできません。しかし、Firefoxでは、要素がdisplayプロパティがnoneに設定されている場合でも、それはどのようにフォーカスを保持しています。

ここで、両方のブラウザが要素のフォーカス保持で動作が異なるため、コードのネット出力はブラウザによって異なります。

この方法を使用できますか？ ：いいえ...理由は：

Firefoxを考慮しても、アコーディオンコンテンツの可視性はフォーカスに基づいているため、ユーザーがサイトの任意の場所をクリックするとすぐに空白部分要素のフォーカスが失われ、期待どおりに機能しません。

これを確認するには、firefoxでこの例題を開き、hideをクリックし、空白をクリックすると、リスト項目が再び表示されます。

CSSのためのより良いアプローチのみアコーディオン

これは、表示または非表示にする時期を決定するためのチェックボックスを使用しています。チェックボックスをビューポートの外側に配置し、ラベルを使用してクリック可能な領域を作成することで、このチェックボックスを非表示にします。

#toggler{ 
 
position:fixed; 
 
    top:-100px; 
 
} 
 
label{ 
 
cursor:pointer; 
 
} 
 
#toggler ~ ol{ 
 
    display:none; 
 
} 
 
#toggler:checked ~ ol{ 
 
    display:block; 
 
} 
 

 
#toggler ~ label .show,#toggler:checked ~ label .hide{ 
 
    display:inline-block; 
 
} 
 
#toggler:checked ~ label .show,#toggler ~ label .hide{ 
 
    display:none; 
 
}

<p>Accordian Example</p> 
 
<div> 
 
    <input id="toggler" type="checkbox" checked/> 
 
    <label for="toggler"> 
 
     Toggle Accordion 
 
     <b class="show">[show]</b> 
 
     <b class="hide">[hide]</b> 
 
     
 
    </label> 
 
    <ol id="list"> 
 
     <li>item 1</li> 
 
     <li>item 2</li> 
 
     <li>item 3</li> 
 
    </ol> 
 
</div>

Answer 2

Try This 

.show { display:none;} 
 
.hide , .show { position :absolute; top:0; left:0; } 
 
.hide:focus {opacity:0; font-size:0;} 
 
.hide:focus + .show { display:block;} 
 
.hide:focus~.list { 
 
    display:none; 
 
    }

<div> 
 
<a href="#" class="hide"><span>[hide]<span></a> 
 
<a href="#" class="show">[show]</a> 
 
<ol class="list"> 
 
    <li>item 1</li> 
 
    <li>item 2</li> 
 
    <li>item 3</li> 
 
</ol> 
 
</div>