jquery - 不倾斜导航栏下拉仅 HTML5/CSS/jQuery

Question

正在测试导航栏，现在我将它的每一部分都倾斜了 -30 度。单击任何给定的片段时，其内容会下拉以显示在单击的内容下方。

我想让被点击的部分打开以显示内容是一个普通的矩形，但平行四边形只是变大以容纳内容。因此，理想情况下，被点击的部分会在顶部保持倾斜，但会打开一个矩形底部以容纳其内容。

尝试弄乱 div 如何相互包含并在其周围移动

        transform: skewX(30deg);
     -o-transform: skewX(30deg);
    -ms-transform: skewX(30deg);
-webkit-transform: skewX(30deg);

但似乎只会让事情变得更糟，感谢任何帮助!

jsFiddle:http://jsfiddle.net/ZUwyj/

Answer 1

您只需要使用 skewX(0deg) 向导航添加一个事件类。

这是 jsFiddle .

编辑

更新的 JsFiddle