jQuery 手风琴列表中的倾斜元素？

Question

我想使用类似 jQuery 的手风琴菜单之类的东西，但要让触发的元素成角度。我猜这是不可能的，但我想看看是否有人尝试过。

一些不太理想的想法：

1. 采用老式方法并使用图像映射。不过，我已经很多年没有使用过图像映射了，所以需要进行一些测试来看看它是否可行。
2. 为每个导航元素使用多个目标区域，并将它们放置在交错布局中。虽然很老套而且臃肿。
3. 使用精美浏览器的旋转功能。这实际上看起来并不算太糟糕，但显然对于大多数用户来说是看不到的。也不确定这将如何影响内容领域 - 但可以探索。

如果需要任何说明，请告诉我。

这是这个概念的草图： 概念草图 http://img158.yfrog.com/img158/3122/slgu.jpg< /a>

Answer 1

我只是指出一个 jQuery 插件可以很好地完成此任务（Diagonal Accordion）。我还没有测试过，但看起来它仅限于 45° 角度，这有点令人失望，但仍然很酷。

Answer 2

是的，我相信这是可以做到的。我满脑子想的都是你会做的事。首先为按钮创建有角度的图像。将这些图像按顺序放在 HTML 标记上，每个图像之间有一个 div 元素。所以标记会是这样的。

<img id="bttnOne" src="buttnImg1" onclick="openContent('bttnContentOne');" />
<div id="bttnContentOne" style="display: none">
   content1 content1 content1
</div>

<img id="bttnTwo" src="buttnImg2" onclick="openContent('bttnContentTwo');" />
<div id="bttnContentTwo" style="display: none">
   content2 content2 content2
</div>

您需要调整 css 以使它们正确适合。留在元素上的浮动效果会很好。现在您已经有了 HTML，您需要创建一个我在上面称为 openContent 的函数。如果需要，您可以将单击的按钮的 id 传递给该函数，或者您可以想出更好的方法来执行此操作。

openContent 函数看起来像下面这样，

function openContent(eleId) {
   $('.activeContent').slideUp('fast');                           //Close the currently opened content tab
   $('#' + eleId).slideDown('slow').class('activeContent');       //Open the new one and set the class
}

现在，我不确定如果需要向右或向左滑动，slideDown 看起来是否正确。如果没有，那么您可以尝试使用动画功能来左右滑动。这是一个非常粗略的例子，说明了如何做到这一点，所以不要指望这段代码能够工作，但主要的思维过程是正确的。

希望这有帮助！

大都会

（已编辑）

我个人不喜欢该示例的一件事是文本也是对角显示的。我相信使用“看起来”对角线的矩形框实际上会更好。这是一个粗略的 ascii 草图:)

---------------------------
|      /| content content |
|     / | content content |
|    /  | content content |
|   /   |                 |
|  /    |                 |
| /     |                 |
|/      |                 |
---------------------------

我不喜欢该特定实现的另一件事是扩展为您创建的所有 div 标签。此时效率非常低。希望将来我们能够轻松地完成这些类型的事情。但现在，如果您希望内容像该实现那样实际上是对角线的，则需要拥有所有这些 div 标签才能获得它。