像 jQuery 的 .click() 一样工作的 CSS3 选择器？答案

【问题标题】：CSS3 Selector That Works like jQuery's .click()?像 jQuery 的 .click() 一样工作的 CSS3 选择器？
【发布时间】：2013-06-17 13:01:31
【问题描述】：

几年来我一直在使用纯 CSS 导航，最近我们开始在我工作的公司构建大量移动网站。我真的很想继续使用纯 CSS，并注意依赖 jQuery，但在移动网站上，下拉菜单无法正常工作。

CSS3 中有没有类似于 jQuery 的 .click(); 事件的东西？基本上，当用户单击导航链接时，我希望下拉菜单打开并保持打开状态。我试着环顾四周，但似乎找不到任何东西。

【问题讨论】：

你能修改html吗？
我可以，现在它是一个基本的<ul> 结构。

标签： javascript jquery css css-selectors

【解决方案1】：

给定一些基本的 HTML 结构，您可以重新创建 JavaScript 实现的切换（显示/隐藏）功能：

使用:target：

HTML：

<nav id="nav">
    <h2>This would be the 'navigation' element.</h2>
</nav>
<a href="#nav">show navigation</a>
<a href="#">hide navigation</a>

CSS：

nav {
    height: 0;
    overflow: hidden;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}
nav:target {
    height: 4em;
    color: #000;
    background-color: #ffa;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

JS Fiddle demo.

使用:checked：

HTML：

<input type="checkbox" id="switch" />
<nav>
    <h2>This would be the 'navigation' element.</h2>
</nav>
<label for="switch">Toggle navigation</label>

CSS：

#switch {
    display: none;
}
#switch + nav {
    height: 0;
    overflow: hidden;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}
#switch:checked + nav {
    height: 4em;
    color: #000;
    background-color: #ffa;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

label {
    cursor: pointer;
}

JS Fiddle demo.

不幸的是，与“:clicked”选择器最接近的原生 CSS 选择器是 :active 或 :focus 伪类，一旦释放鼠标按钮，其第一个选择器将停止匹配，一旦给定元素不再聚焦（通过键盘或鼠标聚焦文档中的其他位置），其中第二个将停止匹配。

更新了演示，允许切换 label 的文本（使用 CSS 生成的内容）：

#switch {
    display: none;
}
#switch + nav {
    height: 0;
    overflow: hidden;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}
#switch:checked + nav {
    height: 4em;
    color: #000;
    background-color: #ffa;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

label {
    display: inline-block;
    cursor: pointer;
}

#switch ~ label::before {
    content: 'Show ';
}

#switch:checked ~ label::before {
    content: 'Hide ';
}

JS Fiddle demo.

参考资料：

:checked (compatibility)。
:target (compatibility)。

【讨论】：

这看起来也不错。似乎比我接受的:target 方法复杂一些，但我也会尝试一下。
:target 方法的 included 包含在答案中... ;) 但是 both 方法不可避免地带有有限的浏览器支持（主要是 Internet Explorer 的在版本 9 之前无法实现 :checked，并且 :target 在版本 9 和 10 中是“不完整的”。
@DavidThomas - 如果他可以将其限制为仅在移动设备上运行，那么这将不是问题，因为移动浏览器通常支持所有最新有趣的 CSS3 内容。
错过了:target 版本在这里，哈哈。只需说:chedked 的东西。就我的目的而言，:target 应该可以正常工作。 Windows Phone 7 附带 IE9，我的计划是仅在站点缩小到移动设备大小（对于响应式站点）时才使用此方法。编码应该很有趣:)
@Rev：:target 方法的一个缺点是它会与许多（所有？）浏览器的“后退”和“前进”功能混淆，因为它正在添加和删除url 字符串的一部分。要查看“问题”，只需在示例小提琴中单击几次显示/隐藏导航后点击浏览器上的“返回”箭头即可。对于用户来说，这种体验可能非常烦人。

【解决方案2】：

您可以使用:target 选择器来实现一些基本功能。见Chris Coyier's post about it。注意，brower support。

编辑：快速demo

【讨论】：

谢谢，这看起来几乎完美。今天晚些时候我会试一试。
能不能通过再次点击或者点击关闭来隐藏菜单？
@Archer，用jQuery，一切皆有可能:)

【解决方案3】：

在你的 CSS 代码中尝试这样的事情...

  selector:hover, selector:active {
     display:block;
     height:100px;//test
     width:200px; //test
     border:solid 1px #000; //test
    }

【讨论】：

【解决方案4】：

试试:active 伪类。它并非完全无懈可击，但您至少应该能够从中获得一些基本功能。

【讨论】：

谢谢，今天晚些时候我会试一试。