1

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

编辑： max-height 在 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/

再次感谢！

4

2 回答 2

0

所以我发现CSS 转换自动高度不起作用（单击该链接的标题）

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

于 2013-05-14T02:19:25.783 回答
0

我设法从 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>
于 2013-10-17T14:47:51.203 回答