Question

我想使用像jQuery的手风琴菜单，但触发元素是有角度的。我猜这是不可能的，但我想我以前是否有人试过它。

一些不太理想的想法：

去老派并使用图像地图。多年来我没有使用过图像映射，所以需要进行一些测试才能看出它是否可能。
为每个导航元素使用多个目标区域，并将它们放置在交错布局中。虽然非常hacky和臃肿。
使用精美浏览器的旋转功能。这实际上似乎并不太糟糕，但对大多数用户来说显然是不可见的。也不确定这会如何影响内容领域 - 但可以进行探索。

如果需要澄清，请告诉我。

这是概念的草图： concept sketch http://img158.yfrog.com/img158/3122/slgu.jpg

Answer 1

是的，我相信这可以做到。从头脑中思考这就是你要做的。首先为按钮创建倾斜图像。将这些图像按顺序放在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看起来不正确。如果没有，那么您可以尝试使用animate功能来左右滑动。这是一个非常粗略的例子，说明如何做到这一点，所以不要指望这个代码可以工作，但主要的思考过程是正确的。

希望这有帮助！

大都市

（编者）

我个人不喜欢这个例子的一件事是文本也是如何对角显示的。我认为选择“看起来”对角线的矩形框实际上会更好。这是一个粗略的ascii草图：）

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

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

Answer 2

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

jQuery手风琴列表中的角度元素？

2 个答案: