像jQuery的.click()一样工作的CSS3选择器?

时间:2013-06-20 15:21:35

标签: javascript jquery css css-selectors

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

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

4 个答案:

答案 0 :(得分:6)

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

编辑:快速demo

答案 1 :(得分: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 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

不幸的是,最接近的替代原生CSS对于':clicked'选择器是:active:focus伪类,其第一个选择器将在鼠标停止匹配-button被释放,一旦给定元素不再聚焦(通过键盘或鼠标聚焦在文档中的其他位置),第二个将停止匹配。

更新了演示,以允许切换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

参考文献:

答案 2 :(得分:2)

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

答案 3 :(得分:1)

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

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