0

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

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

4

4 回答 4

6

您可以将:target选择器用于一些基本功能。请参阅Chris Coyier 的帖子。注意，浏览器支持。

编辑：做了一个快速演示

于 2013-06-20T15:29:06.720 回答
4

给定一些基本的 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 小提琴演示。

使用: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 小提琴演示。

不幸的是，与“”选择器最接近的原生 CSS:clicked选择器是:activeor: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 小提琴演示。

参考：

于 2013-06-20T15:33:10.223 回答
2

试试:active伪类。它不是完全防弹的，但您应该能够从中获得至少一些基本功能。

于 2013-06-20T15:22:25.820 回答
1

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

  selector:hover, selector:active {
     display:block;
     height:100px;//test
     width:200px; //test
     border:solid 1px #000; //test
    }
于 2013-06-20T15:24:05.373 回答