可折叠列表，不响应点击

Question

我正在制作一个网站，试图让下面的代码工作。 有趣的部分是，在这里的代码snipp Stackoverflow的东西它的作品。但在我的网站上却没有。有人有什么主意吗？它的代码网页完全相同： 当点击蓝色栏时，它应该折叠并显示另一个项目。

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

符合您label标签的for属性您radio按钮id为每li，你会很开心。

正如你在你的问题，即为什么它在这里工作堆栈片段一样。

由于：

<li> 
    <label for="MainContent_Nummer2">nummer 2</label> 
    <input value="Nummer2" name="ctl00$MainContent$Email" type="radio" id="MainContent_Nummer2"> 
    <div>Helemmoooie email<br><br><br></div> 
</li> 

Answer 2

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

检查控制台它表明： 无法加载资源：服务器与404（未找到）状态回应