1

What I'm looking for is proving rather difficult to find after spending hours going through various JScript and CSS3 versions of a Horizontal Accordion...

Basically, we pay for and use a hell of a lot of the Telerik controls and I for a particular page I have 3 RadGrids and a RadHTMLBarChart that I wish to display in 4 seperate panels if you like..

The way I would really like to display these would be in a Horizontal Accordion but given the fact that the content is mostly dynamic in the sense that the height may adjust of the radgrid given the number of records it holds or the width may adjust of the chart depending on how many columns it is to show a fixed width version is really not going to work...

So, is there any suitable version of a horizontal accordion out there that somebody knows about that I can use in my projects for this sort of scenario?

Either JS or CSS3 I don't mind...

Thanks in Advance! Adam.

4

1 回答 1

1

使用 CSS3 可以实现水平手风琴，需要注意的是，您需要使用 CSS 预编译器，例如 LESS 或 SASS（我在这里使用 LESS）。

它需要有趣地使用无序列表<ul>、<label>s 和<input>单选按钮。

@slideWidth: 3%;
@totalWidth: 100%;

.slider(@slides) {
    input[type="radio"]:checked ~ .accslide {
        width: @totalWidth * ((@totalWidth - (@slideWidth * @slides)) / 100);
    }
}

上面定义的“类” .slider(@slides) 是使用每个幻灯片分隔线的宽度（表示为 3% 宽度）计算幻灯片部分相对于屏幕的正确尺寸（表示为 100% 宽度）。

“类” .accslide 是实际的“幻灯片部分”，作为“通用兄弟”访问。

这是codepen中的一些工作 LESS 。

为了处理手风琴的动画，每个“accslide”都使用另一个名为 .transitionArgs(@arguments) 的 LESS“类”，它被称为“mixin”，这允许您处理浏览器的交叉兼容性。

.transitionArgs(@arguments) {
    -webkit-transition: @arguments;
    -moz-transition: @arguments;
    -ms-transition: @arguments;
    -o-transition: @arguments;
    transition: @arguments;
}

如果您有任何问题随时问。

于 2015-11-17T12:20:11.140 回答