4

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

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

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

4

1 回答 1

6

您可以创建一个绝对定位的链接，指向出现在您的链接前面的另一个锚点:target，并使其仅在当前:target有效时显示。所以在视觉上它将表现为一个切换链接（见小提琴）：

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 使用方式。

于 2013-07-11T16:23:30.113 回答