1

问题是手风琴有一个 300px 的高度，当幻灯片关闭时，它在手风琴本身下方留下空白。这会导致间距问题，因为它下面的任何东西都必须在这个缓出空间之后。

查看我的旧 CSS Accordion 后，似乎是因为幻灯片本身设置了 300px 的高度，而在旧的手风琴中它只有 ~40px，然后在被点击后打开了 ~200px 的幻灯片。（尽管这会晃动屏幕。）如果可能，我想避免使用 HTML5，并且只有在没有其他选择的情况下才使用 javascript。

有没有一种快速/简单的方法来隐藏这个空间，或者我正在寻找另一个手风琴？

这是我为显示问题而制作的快速 JSFiddle http://jsfiddle.net/RahpC/4/

老手风琴：

.vertical section{ width:100%; height:40px;
    -webkit-transition:height 0.2s ease-out;
    -moz-transition:height 0.2s ease-out;
    -o-transition:height 0.2s ease-out;
    -ms-transition:height 0.2s ease-out;
    transition:height 0.2s ease-out;
}
/*Set height of the slide*/
.vertical :target{ height:250px; width:97%; }

新手风琴：

#vertical{
    width:700px;
    height:300px;
}

旧手风琴风格的问题是我认为我必须改为使用“#”来制作目标，如果这是唯一的解决方案，我不确定我需要重写多少。

另一种解决方案是删除我在幻灯片中使用的图像，然后减小手风琴的整体尺寸，但这有点违背了我正在做的事情的意义。

提前感谢您的帮助:)

4

1 回答 1

3

如果您对手风琴元素的高度使用百分比值不是强制性的，那么这是一个简单的解决方案：http: //jsfiddle.net/RahpC/18/

我变了...

#vertical{
    width:700px;
    height:auto; /* changed to auto from 300px */
}
#vertical li{
    height:50px; /* changed from 14% to 50px */
    width:100%;
    -moz-transition:height 0.2s ease-out;
    -webkit-transition:height 0.2s ease-out;
    -o-transition:height 0.2s ease-out;
    transition:height 0.2s ease-out;
}
#vertical li:hover{
    height:200px; /* was 60% changed to 200px, can be made as high as you need */
    width:100%;
}

这里的好处是您可以添加任意数量的幻灯片，因为高度是专门定义的，所以它将始终有效。

于 2013-06-04T13:23:30.450 回答