Question

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

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

任何和所有帮助都表示赞赏。

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/

再次感谢！

Answer 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 plz的小提琴......它更长更详细。

Answer 2

我设法将Christofer和Elementalsin的一些东西放在一起，讨论这个问题。有关更好地理解所涉及的css3，请参阅fiddle。此修改效果更好，因为上面的示例只能在单击第二个项目后关闭项目。在这里你可以切换它们。

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

CSS Transition Accordion Radio无法使用height：auto或max-height（已编辑）

2 个答案: