所以我的问题是我有一个复选框作为按钮，弹出一个导航栏。当您按下此按钮时，页面变暗，导航栏弹出，并且菜单上出现了问号。无论如何。当你按下Play（导航栏上的一个按钮）时，我已经这样做了，它会进入网站的特定点。当您到达网站时，菜单不会消失。所以你无法点击任何地方。我想要它，所以你点击菜单上的东西，菜单消失，并带你到你的领导。
这是HTML doucument。
Array
(
[BC] => Array
(
[Winnipeg] => Array
(
[0] => Licensed Technician - Body Technician
)
)
[Prairies] => Array
(
[Winnipeg] => Array
(
[0] => Licensed Technician - Body Technician
)
[Edmonton] => Array
(
[0] => Tire Technician
)
)
[Ontario] => Array
(
[Regional Support Centre (Mississauga)] => Array
(
[0] => Payroll and Benefits Representative
[1] => Payroll and Benefits Administrator
)
[Mississauga] => Array
(
[0] => Shunt-Delivery Driver
[1] => Technician
)
)
)
这是css。
<!DOCTYPE html>
<html>
<head>
<link rel=stylesheet href="css.css" type="text/css" />
<link rel="icon" href="favicon.ico" type="image/icon"/>
<title>Das Krankenhaus</title>
</head>
<body>
<!-- start header -->
<header id="head">
<div class="something">
<nav id="menu">
<input type="checkbox" id="toggle-nav"/>
<label id="toggle-nav-label" for="toggle-nav"><i class="icon-reorder"></i></label>
<div class="box">
<ul>
<li><a href="#play"><i class="icon-home"></i> Play</a></li>
<li><a href="#"><i class="icon-file-alt"></i> about</a></li>
<li><a href="#"><i class="icon-copy"></i> XXXXXX</a></li>
<li><a href="#"><i class="icon-envelope"></i> contacts</a></li>
</ul>
</div>
</nav>
</div>
</header>
<!-- end header -->
</div>
</section>
<!-- end content -->
<div class="jumbotron text-center">
<div class="container">
<h1>Das Krankenhuas</h1>
<p style="color:#888;">A game you will never escape</p>
</div>
</div>
<div class="container">
</div>
<div id="h1">
<center>
<h3> About The Game </h3>
</div>
<div id="text">
<center>
<p> "Daz Krankenhaus" is a text based adventure game set in WW2, you have been captured by the enemie and need to find your way out. <br> It is currently in developement, so its not a full game. It is 100% made in Html,Javascript and CSS. </p>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
</div>
<div id="h1">
<center>
<h3> Update log</h3>
</div>
<div id="text">
<center>
<p> Update 1: Where it all started.
<br> <br>
Update 2: Bunker hallways, bug fixes. timer for getting killed. office. important man. uniform. form. kill with gun.
<br> <br>
Update 3: fix search guard and some bugs. Interrgatoin room. </p>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
</div>
<a id="play"></a>
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-6"> <a href="http://www.musaus.no/simen/Krankenhausen/index.html" class="btn btn-sm animated-button thar-one">Play</a> </div>
</div>
</div>
<footer class="jumbotron text-center">
<div class="container">
<p style="color:#888">Copy righted <a href="http://2good4you.no">2good4you</a></p>
</div>
</footer>
</body>
</html>
谢谢！
答案 0 :(得分：4)
您的菜单覆盖样式与css中复选框的已选中属性相关联。因此，当您单击该复选框时，它会更改菜单上的某些属性（z-index和opacity）以显示它。为了使其回退到不显示菜单的默认状态，您必须取消选中该复选框（如果您想按原样使用css）。为此，您可以使用Javascript。我在下面的代码片段中使用了jQuery，只要点击菜单中的链接，就可以将复选框的checked属性设置为false，并且神奇地将菜单消失！干杯！
（我应该补充一点，这个解决方案需要jQuery 1.6或更新。当引入道具时。如果这是一个问题，用户@Xian就修改已检查的属性有很好的写法在这里以不同的方式：Setting "checked" for a checkbox with jQuery?）
$(function() {
$(".box a").on("click",function() {
$("#toggle-nav").prop('checked', false)
});
});@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css);
body {
font-family: 'Lato', sans-serif;
background: #353535;
color: #FFF;
}
#text {
color: #888;
}
.jumbotron h1 {
color: #353535;
}
/* under play */
footer {
margin-bottom: 0 !important;
margin-top: 80px;
}
footer p {
margin: 0;
padding: 0;
}
span.icon {
margin: 0 5px;
color: #D64541;
}
h2 {
color: #BDC3C7;
text-transform: uppercase;
letter-spacing: 1px;
}
.mrng-60-top {
margin-top: 60px;
}
a.animated-button:link, a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size:14px;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
border-radius: 0;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
a.animated-button.thar-one {
color: white;
cursor: pointer;
display: block;
position: relative;
width: 100%;
margin-left: 170%;
border: 2px solid white;
transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
margin-bottom: 0 !important;
margin-top: 80px;
}
a.animated-button.thar-one:hover {
color: white !important;
background-color: black;
text-shadow: none;
}
a.animated-button.thar-one:hover:before {
bottom: 0%;
top: auto;
height: 100%;
margin: 0 auto;
}
a.animated-button.thar-one:before {
display: white;
position: absolute;
left: 0px;
top: 0px;
height: 0px;
width: 100%;
z-index: -1;
content: '';
color: black !important;
background: black;
transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
@import url('http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css');
* { padding: 0px; margin: 0px; border: 0px; outline: 0px; } /* fast reset */
body {
font-family: 'Merriweather Sans', Arial, sans-serif;
font-size: 12px;
}
a { text-decoration: none; }
a:hover { text-decoration: underline; }
li { list-style: none; }
.something { margin: 0px 20% 0px 20%; }
#head { margin-top: 20px; }
#menu .box {
position: fixed;
text-align: center;
overflow: hidden;
z-index: -1;
opacity: 0;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
background: rgba(0,0,0,0.8);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#menu ul {
position: relative;
top: 20%;
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#menu li {
display: inline-block;
margin: 20px;
}
#menu li a {
border-radius: 3px;
padding: 15px;
border: 1px solid transparent;
text-decoration: none;
font-size: 18px;
color: #fff;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#menu li a:hover { border-color: #fff; }
#menu li a i {
margin-right: 5px;
font-size: 24px;
}
/* Box */
#toggle-nav-label {
color: rgba(0,0,0,0.5);
background: white;
text-align: center;
line-height: 30px;
font-size: 16px;
display: block;
cursor: pointer;
position: relative;
z-index: 500;
width: 30px;
height: 30px;
border-radius: 10px;
}
#toggle-nav { display: none; }
#toggle-nav:checked ~ .box {
opacity: 1;
z-index: 400;
}
#toggle-nav:checked ~ .box ul {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
#toggle-nav:checked ~ #toggle-nav-label {
background: #fff;
color: rgba(0,0,0,0.8);
}
#content { margin: 20px 0px 20px 0px; }
#content h1 {
margin-bottom: 20px;
font-size: 30px;
}
#content p {
font-size: 14px;
line-height: 150%;
margin-bottom: 20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div>
<!-- start header -->
<header id="head">
<div class="something">
<nav id="menu">
<input type="checkbox" id="toggle-nav"/>
<label id="toggle-nav-label" for="toggle-nav"><i class="icon-reorder"></i></label>
<div class="box">
<ul>
<li><a href="#play"><i class="icon-home"></i> Play</a></li>
<li><a href="#"><i class="icon-file-alt"></i> about</a></li>
<li><a href="#"><i class="icon-copy"></i> XXXXXX</a></li>
<li><a href="#"><i class="icon-envelope"></i> contacts</a></li>
</ul>
</div>
</nav>
</div>
</header>
<!-- end header -->
</div>
</section>
<!-- end content -->
<div class="jumbotron text-center">
<div class="container">
<h1>Das Krankenhuas</h1>
<p style="color:#888;">A game you will never escape</p>
</div>
</div>
<div class="container">
</div>
<div id="h1">
<center>
<h3> About The Game </h3>
</div>
<div id="text">
<center>
<p> "Daz Krankenhaus" is a text based adventure game set in WW2, you have been captured by the enemie and need to find your way out. <br> It is currently in developement, so its not a full game. It is 100% made in Html,Javascript and CSS. </p>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
</div>
<div id="h1">
<center>
<h3> Update log</h3>
</div>
<div id="text">
<center>
<p> Update 1: Where it all started.
<br> <br>
Update 2: Bunker hallways, bug fixes. timer for getting killed. office. important man. uniform. form. kill with gun.
<br> <br>
Update 3: fix search guard and some bugs. Interrgatoin room. </p>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
</div>
<a id="play"></a>
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-6"> <a href="http://www.musaus.no/simen/Krankenhausen/index.html" class="btn btn-sm animated-button thar-one">Play</a> </div>
</div>
</div>
<footer class="jumbotron text-center">
<div class="container">
<p style="color:#888">Copy righted <a href="http://2good4you.no">2good4you</a></p>
</div>
</footer>