Question

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

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

有没有办法用纯css / html做到这一点，还是我需要更改为javascript / jquery才能执行此操作？到目前为止，我使用css3来避免这种情况。

Answer 1

您可以创建一个绝对定位的链接，该链接显示在:target链接前面显示的另一个锚点，并仅在当前:target有效时显示。所以在视觉上它将表现为切换链接（see 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使用方式。

删除：目标标记

1 个答案: