CSS Transition Accordion Radio 不能使用 height: auto 或 max-height（已编辑）答案

【问题标题】：CSS Transition Accordion Radio Doesn't work using height: auto or max-height (Edited)CSS Transition Accordion Radio 不能使用 height: auto 或 max-height（已编辑）
【发布时间】：2013-05-08 04:03:44
【问题描述】：

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

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

感谢您的任何帮助。

HTML

<section class="container">
<div>
    <input id="test1" name="acctest" type="radio" checked />
    <label for="test1">About us</label>
    <ul>
        <li>test</li>
        <li>test2</li>
    </ul>
</div>
<div>
    <input id="test2" name="acctest" type="radio" />
    <label for="test2">About us</label>
    <ul>
        <li>test</li>
        <li>test2</li>
    </ul>
</div>

CSS

.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;}

更新的 jsfiddle 链接：http://jsfiddle.net/ETaXr/2/

再次感谢！

【问题讨论】：

标签： html height accordion css

【解决方案1】：

所以我找到了CSS transition auto height not working（点击该标题获取链接）

向 Christofer Vilander 提供答案和小提琴链接的道具。

我将小提琴编辑为单选按钮（该演示使用了复选框）并更改了一些类/ID 名称......它工作......似乎我需要比我做的更多地定义 UL。

http://jsfiddle.net/3WK9Y/11/

<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>

请参阅 css 的小提琴...它更长更详细。

【讨论】：

【解决方案2】：

我设法从 Christofer 和 Elementalsin 的点点滴滴中总结出一些关于这个主题的东西。请参阅fiddle 以更好地了解所涉及的 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>

【讨论】：