1

我需要在 jQuery UI 中实现一个展开/折叠框。折叠时，只会显示框标题。展开时，会显示标题+内容。

我需要做的是非常接近带有 alwaysOpen=false 的 jQuery UI 单元素手风琴（相同的属性在文档中称为“可折叠”，但在 jQuery 1.3.2 和 jQuery UI 1.6rc6 的实践中，它似乎总是打开） ：

$('.myAccordion').accordion({
    header: 'h3'
    , alwaysOpen: false
});

有一个问题：我需要展开/折叠仅在单击左侧的三角形时发生，而不是在单击整个标题时发生。

另一个要求是我想使用 jQuery UI 默认 UI 样式而不是实现我自己的样式表，以便我可以在需要时使用 themeRoller 滚动新样式。jQuery UI 中的手风琴样式（包括标题中的箭头）非常适合此目的。

现在，我有两个选择：

1) 配置 Accordion 小部件，以便只有三角形响应展开/折叠事件。我需要基本上忽略标题其余部分的点击。

2）实现我自己的小部件，使用手风琴样式作为基础。

我宁愿做 1)，但我很难弄清楚如何只让箭头响应点击事件。

那么，至于实际的问题，您将如何做到这一点？

4

2 回答 2

1

我是这样做的：

$('.accordion').accordion({
  header: '.accordion-header',
  collapsible: true
});
于 2012-11-03T12:29:03.270 回答
0

好的，事实证明，使用手风琴小部件本身很容易做到这一点。只需这样设置手风琴：

$('.myAccordion').accordion({
    header: 'h3'
    , alwaysOpen: false
    , event: 'click'
});

$('.myAccordion h3 a').click(function() {
    return false;
})

虽然由于点击目标区域太小，这是不好的可用性实践，但它回答了我发布的问题。

于 2009-02-25T22:04:42.983 回答