Question

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

Answer 1

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

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

如：

li

Answer 2

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

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

可折叠列表，不响应点击

2 个答案: