Html CSS转换手风琴收音机不'；t使用高度工作：自动或最大高度（已编辑）

使用单选按钮触发隐藏/显示的手风琴菜单。在JSFIDLE中工作。。。在我尝试过的任何其他浏览器中都不起作用。我假设我错过了一些小东西，或者我错过了，或者我完全迷路了。我知道不是所有的浏览器/设置/等等都能正常工作，但是从我读到/理解的这项工作来看

编辑：最大高度在JSFIDLE中也不起作用。。。所以这一定是问题所在。基本上我希望ul自动扩展到它的li列表的长度。因此，使用固定高度将不起作用。高度：自动；以及最大高度；都不行

感谢您的任何帮助

HTML

更新的JSIDLE链接：

再次感谢

所以我找到了（点击链接的标题）

克里斯托弗·维兰德的答案和小提琴链接道具

我将小提琴编辑为单选按钮（演示使用了复选框），并更改了一些类/id名称。。。而且它是有效的。。。似乎我比以前更需要定义UL

一些内容

关于我们

更多内容
试验

关于我们

---

看到小提琴的css plz。。。它更长更详细。

我设法把克里斯托弗和Elementalsin关于这一主题的点点滴滴与和平结合起来。请参阅，以更好地了解所涉及的css3。此修改效果更好，因为上面的示例只能在单击第二个项目后关闭该项目。在这里您可以切换它们

<div class="css3-acc">
<input id="css3-acc-def" type="radio" name="ccs3-acc-grp" checked="checked" />

<label>
  <input class="inner" type="radio" name="ccs3-acc-grp" />
  <h3>Item 1</h3>
  <label for="css3-acc-def"></label>
  <ul>
    <li><a href="#">Sub nav</a></li>
    <li><a href="#">Sub nav</a></li>
    <li><a href="#">Sub nav</a></li>
    <li><a href="#">Sub nav</a></li>
  </ul>
</label>   

</div>

项目1

.container ul{
background: rgba(255, 255, 255, 0.5);
margin: 0px;
overflow: hidden;
height: 0px;
position: relative;
    margin: 0;
z-index: 1;
    -webkit-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
    -moz-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
    -o-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
    -ms-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
    transition: height 0.5s ease-in-out, box-shadow 0.9s linear;}
.container li{
    height: 25px;
    color: #000;
    font-size: 12px;}
.container input:checked ~ ul{
    -webkit-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
    -moz-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
    -o-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
    -ms-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
    transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
    max-height: 50px;}

<div class="ac-container">
<div>

    <input id="ac-1" name="accordion-1" type="radio" checked/>
    <ul class="ac-small">
        <li>Some content</li>
    </ul>
    <label for="ac-1">About us</label>

</div>    

<div>    
    <input id="ac-2" name="accordion-1" type="radio" />
    <ul class="ac-small">
        <li>Some more content</li>
        <li>test</li>
    </ul>
    <label for="ac-2">About us</label>
</div>
</div>

<div class="css3-acc">
<input id="css3-acc-def" type="radio" name="ccs3-acc-grp" checked="checked" />

<label>
  <input class="inner" type="radio" name="ccs3-acc-grp" />
  <h3>Item 1</h3>
  <label for="css3-acc-def"></label>
  <ul>
    <li><a href="#">Sub nav</a></li>
    <li><a href="#">Sub nav</a></li>
    <li><a href="#">Sub nav</a></li>
    <li><a href="#">Sub nav</a></li>
  </ul>
</label>   

</div>