html - 过渡：释放点击时活动黑客消失

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/