0

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

我想知道是否可以用纯 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';
         }  
    }
}
4

2 回答 2

2

当您可以使用 CSS 获得相同的结果时，防止过度使用 JavaScript 是一种很好的做法，但有时需要更改 DOM 元素并应用一些“技巧”才能使其工作，而这根本不是很好。

看看这个只有 CSS3的DEMO 。您可以使用悬停事件而不是单击事件来实现类似的效果。您可以更改:hover为，:active但这只有在 DIV 元素内按住鼠标按钮时才有效。

此.menuItem:hover + .subItemCSS 规则显示.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;
}

工作演示

于 2013-08-22T15:18:36.177 回答
0

我想你可以看看这个教程：链接

希望这可以帮助

于 2013-08-22T15:06:49.577 回答