删除：target标签

Question

我一直在使用css3和target属性来制作交互式菜单。当我单击菜单按钮时，我使用：target属性使其打开子菜单。我只是说，当我的菜单点是目标时，将子菜单高度设置为自动，如果不是目标，则其高度应为0。

但是现在我的问题是：是否有一种简单的方法可以再次删除目标？我想做的是，当我单击菜单按钮时，子菜单将显示（我已经做过了）。然后，如果我再次单击相同的按钮，我想再次关闭。

有没有办法用纯CSS / HTML做到这一点，还是我需要更改为javascript / jquery来做到这一点？到目前为止，我使用css3来避免这种情况。

Answer 1

您可以创建到另一个锚的绝对定位的链接，该锚出现在指向您的链接的前面:target，并仅在当前:target有效时显示。因此，从视觉上看，它将作为切换链接（请参阅fiddle）：

的HTML

<div id="test">
    <h2>
        <a href="#test">Open me</a>
        <a href="#" class="untarget"></a>
    </h2>
    <div>
        <p>Some contents</p>
        <p>Some more contents</p>
        <p>Some more contents again</p>
    </div>
</div>

CSS的关键部分

h2 {
    position: relative;
    display: inline-block;
}

.untarget {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
}

:target .untarget {
    display: block;
}

在没有JS的情况下实现切换功能的另一种（也是非常流行的）方法是使用隐藏的复选框/单选按钮及其:checked伪类以及CSS同级组合器。但个人而言，我怀疑这是否是正确的HTML使用方式。