用纯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

唯一的问题是，当我点击另一个选项卡时，其他选项卡未关闭。 –