html - 转换 :active hack disappearing when releasing click

Question

我正在尝试使用 Transition hack 在单击某些文本时显示一个 div。当我点击它时它起作用但是当我释放按钮时它消失了。当我释放点击时，有什么办法可以让它保持在那里吗？

此处示例代码:

http://jsfiddle.net/tytFE/

<span><div class="menu-button">Click me!</div></span>
<div class="menu">
<div class="container">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Skills</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>

CSS

.menu {
transition: all 0s 9999999s !important;
display:none;
position:fixed;
top:0;
left:0;
background:#222;
padding:20px 0 20px 0;
margin:0 auto;
width:100%;
z-index:999;
text-transform:uppercase;
text-align:center;
font-size:20px;
}

.menu a {
color:#999;
font-weight:300;
width:16%;
-webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
   -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
      transition: all 1s ease;
}

.menu a:hover {
color:#258ace;
font-weight:300;
text-decoration:none;
}

span:active ~ .menu {
transition: all 0s !important;
display:inline;
position:fixed;
top:0;
left:0;
background:#222;
padding:20px 0 20px 0;
margin:0 auto;
width:100%;
z-index:999;
text-transform:uppercase;
text-align:center;
font-size:20px;
}

.menu-button {
position:fixed;
bottom:20px;
z-index:999;
width:100%;
text-align:center;
}

.menu ul {
list-style:none;
display:inline;
margin:0;
}

.menu li {
list-style:none;
display:inline;
margin:0;
margin: 0 5px 0 5px;
}

Answer 1

在您释放点击后，该元素不会保持事件状态。相反，您需要为可切换状态使用选择器，例如 :checked，这需要复选框或单选按钮。

<label for=checkme>Check me!</label>
<input id=checkme type=checkbox>

:checked ~ .menu {
    display: block;
}

http://jsfiddle.net/tytFE/1/