我正在制作一个网站,尝试使用以下代码。 有趣的是,这里是Stackoverflow的代码snipp,它的工作原理。但在我的网站上却没有。有谁有想法吗?它完全相同的代码网页: 当点击蓝色条时,它应该折叠并显示另一个项目。
ul {
padding: 0;
}
div.emailblok {
width: 100%;
text-align: center;
display: block;
}
nav.emails {
box-shadow: 0 0 10px rgba(0, 0, 0, .15);
overflow: hidden;
text-align: center;
border-radius: 20px;
display: inline-block;
width: 100%;
}
nav.emails > ul {
list-style-type: none;
}
nav.emails > ul > li {
display: block;
}
nav.emails > ul > li > label,
nav.emails > ul > li > a {
background-color: rgb(0, 0, 118);
background-image: -webkit-linear-gradient(135deg, rgb(30, 144, 255), rgb(0, 0, 118));
background-image: -moz-linear-gradient(135deg, rgb(30, 144, 255), rgb(0, 0, 118));
background-image: -o-linear-gradient(135deg, rgb(30, 144, 255), rgb(0, 0, 118));
background-image: linear-gradient(135deg, rgb(30, 144, 255), rgb(0, 0, 118));
border-bottom: 1px solid rgba(255, 255, 255, .1);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1), 0 1px 1px rgba(0, 0, 0, .1);
color: rgb(255, 255, 255);
display: block;
font-size: .7rem;
font-weight: 400;
height: 50px;
letter-spacing: .4rem;
line-height: 50px;
text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
text-transform: uppercase;
transition: all .1s ease;
text-decoration: none;
}
nav.emails > ul > li > label + input {
display: none;
visibility: hidden;
}
nav.emails > ul > li > label:hover,
nav.emails > ul > li > a:hover {
background-color: rgb(1, 4, 122);
background-image: -webkit-linear-gradient(150deg, rgb(1, 4, 122), rgb(1, 4, 122));
background-image: -moz-linear-gradient(150deg, rgb(1, 4, 122), rgb(1, 4, 122));
background-image: -o-linear-gradient(150deg, rgb(1, 4, 122), rgb(1, 4, 122));
background-image: linear-gradient(150deg, rgb(1, 4, 122), rgb(1, 4, 122));
cursor: pointer;
}
nav.emails > ul > li > label + input:checked + div {
max-height: 500px;
}
nav.emails > ul > li > div {
background-color: rgb(255, 255, 255);
max-height: 0;
overflow: hidden;
transition: all .5s linear;
}
<div class="emailblok">
<nav class="emails">
<ul>
<li runat="server">
<label for="Nummer0">Nummer 0</label>
<input type="radio" runat="server" name="Email" id="Nummer0" checked />
<div>
Helemmoooie email
<br />
<br />
<br />
</div>
</li>
<li runat="server">
<label for="Nummer1">Nummer 1</label>
<input type="radio" runat="server" name="Email" id="Nummer1" />
<div>
Helemmoooie email
<br />
<br />
<br />
</div>
</li>
<li runat="server">
<label for="Nummer2">nummer 2</label>
<input type="radio" runat="server" name="Email" id="Nummer2" />
<div>
Helemmoooie email
<br />
<br />
<br />
</div>
</li>
</ul>
</nav>
</div>
答案 0 :(得分:1)
将for
标记的label
属性与每个id
的{{1}}按钮的radio
相匹配,您就可以了。
正如您在问题中所做的那样,也就是为什么它在 Stack Snippet 中工作。
如:
li
答案 1 :(得分:0)
请检查控制台。您共享的代码工作正常,但应用程序中css或资源的位置不正确。
检查它显示的控制台: 无法加载资源:服务器响应状态为404(未找到)