Question

更新我使用单选按钮，所以你只能打开一个项目。但你不能关闭它。 Fiddle

我想知道是否有可能在纯CSS中制作我的菜单。现在我用javascript修改css。

注意：我没有使用Jquery或任何其他lib，这不是我的问题。

Fiddle我要在纯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是一种很好的做法，但有时需要更改DOM元素并应用一些“技巧”来使其工作，这不是很好所有

仅使用CSS3查看此 DEMO 。您可以使用悬停事件而不是单击事件来执行类似的效果。您可以将:hover更改为:active，但只有在DIV元素中按住鼠标按钮时才会有效。

此.menuItem:hover + .subItem CSS规则显示了悬停.subItem的下一个.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;
}

<强> Working demo

Answer 2

我想你可以看看这个教程：Link

希望这会有所帮助

用纯CSS切换菜单？

2 个答案: