javascript - 純粋なcssでメニューを切り替えますか?

Question

更新 ラジオボタンを使用したため、アイテムは1つしか開くことができません。しかし、あなたはそれを閉じることができません。フィドル

純粋な CSS でメニューを作成できるかどうか疑問に思っています。今私はjavascriptでcssを変更します。

注: 私は Jquery やその他のライブラリを使用していません。それは私の質問ではありません。

純CSSで作りたいメニューのフィドル

HTML:

<div class="menuItem" onclick="mySwitch(0)">Click Item 1</div>
<div class="subItem">Hi there</div>

<div class="menuItem" onclick="mySwitch(1)">Click Item 2</div>
<div class="subItem">Some text over here.</div>

<div class="menuItem" onclick="mySwitch(2)">Click Item 3</div>
<div class="subItem">Tnx for clicking</div>

CSS:

    .menuItem {
        display:block;
        width:100%; 
        height:20px;
        background:#ff0;
    }

    .subItem {
        display: none;     -- Hide the submenu
    }

Javascript

function mySwitch(nr) {
    var itemsArr = document.getElementsByClassName('subItem');    
    for(var i = 0; i < itemsArr.length; i++) {
         var item = itemsArr[i];
         if(i == nr) {
             if(item.style.display == 'none') {
                 item.style.display = 'block';
             } 
             else {          
               item.style.display = 'none';
             }
         } else {
             item.style.display = 'none';
         }  
    }
}

Answer 1

CSS で同じ結果を得ることができる場合は、JavaScript の過度の使用を防止することをお勧めします。

CSS3 のみのこのDEMOを見てください。同様の効果を行うことができますが、クリック イベントの代わりにホバー イベントを使用します。に変更:hoverすることはでき:activeますが、DIV 要素内でマウス ボタンを押し続けた場合にのみ機能します。

この.menuItem:hover + .subItemCSS ルールは.subItem、hovered の次の要素を表示しています.menuItem

JavaScript イベントを使用したくないため、要素にクラスを適用することはできません。そうすれば、より簡単になります。このように、CSS のみを使用して、DIV 要素の代わりにチェックボックスを使用するなどのいくつかのトリックを適用し、それらの:checkedプロパティを CSS ルールとして使用してサブリンクを表示できます。

このようなもの：

<label for="m1" class="menuItem">Click Item 1</label>
<input id="m1" class="cb" type="checkbox">
<div class="subItem">Hi there</div>

<label for="m2" class="menuItem">Click Item 2</label>
<input id="m2" class="cb" type="checkbox">
<div class="subItem">Some text over here.</div>

<label for="m3" class="menuItem">Click Item 3</label>
<input id="m3" class="cb" type="checkbox">
<div class="subItem">Tnx for clicking</div>

.cb {
    display: none;
}

.cb:checked + .subItem {
    display: block;
}

ワーキングデモ

Answer 2

このチュートリアルを見ることができると思います:リンク

お役に立てれば