1

トランジション ハックを使用して、テキストをクリックしたときに 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;
}
4

1 に答える 1

0

クリックを放した後、要素はアクティブな状態のままではありません。:checked代わりに、チェックボックスまたはラジオ ボタンが必要な などのトグル可能な状態のセレクターを使用する必要があります。

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

:checked ~ .menu {
    display: block;
}

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

于 2013-11-05T20:11:55.157 に答える