可折叠列表,不响应点击

时间:2016-09-06 10:29:19

标签: html css asp.net radio-button

我正在制作一个网站,尝试使用以下代码。 有趣的是,这里是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>

2 个答案:

答案 0 :(得分:1)

for标记的label属性与每个id的{​​{1}}按钮的radio相匹配,您就可以了。

  

正如您在问题中所做的那样,也就是为什么它在 Stack Snippet 中工作。

如:

li

答案 1 :(得分:0)

请检查控制台。您共享的代码工作正常,但应用程序中css或资源的位置不正确。

检查它显示的控制台: 无法加载资源:服务器响应状态为404(未找到)