用純css切換菜單？

更新我用單選按鈕，所以你只能打開一個項目。但你不能關閉它。 Fiddle 用純css切換菜單？

我想知道是否有可能使我的菜單在純粹的CSS。現在我用javascript修改CSS。

注意：我沒有使用jquery或任何其他lib，那不是我的問題。

我想在純CSS使菜單的Fiddle

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'; 
     } 
    } 
}

來源

2013-08-22 Johan Hoeksma

您可以通過使用一個單選按鈕風格的配置，以打開/關閉子菜單，如果這是你所追求的破解這個。看到這個例子：[css-tricks]（http://css-tricks.com/functional-css-tabs-revisited/）。您可以修改它以適應您的需求。 – robooneus

嘗試使用谷歌搜索「純粹的css手風琴」 – j08691

或檢查[CSSPlay菜單]（http://www.cssplay.co.uk/menus/）爲您的所有菜單需要... – dc5

這是很好的做法，以防止過度使用JavaScript的時候可以達到與CSS相同的結果，但有時它需要改變DOM元素，並運用一些「訣竅「來讓它起作用，而且這並不是那麼好。

看看這個DEMO只有CSS3。您可以使用懸停事件而不是點擊事件來實現類似的效果。您可以將:hover更改爲:active，但只有在DIV元素內按住鼠標按鈕的情況下才有效。

這.menuItem:hover + .subItem CSS規則顯示徘徊.menuItem

既然你不想使用JavaScript事件的下一.subItem元素，你不能在一個類應用到元素。如果你這樣做會更容易。這樣，只使用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; 
}

Working demo

來源

2013-08-22 15:18:36 letiagoalves

Tnx這就是我一直在尋找。所以它不可能只使用div。使用CSS設計輸入將起作用。 –

@JohanHoeksma很高興幫助。如果出現'：clicked'狀態，則只能使用div。但不幸的是沒有。 – letiagoalves

唯一的問題是，當我點擊另一個選項卡時，其他選項卡未關閉。 –