Question

我需要在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），但我很难弄清楚如何只让箭头响应点击事件。

那么，至于实际问题，你会怎么做？

Answer 1

我这样做了：

$('.accordion').accordion({
  header: '.accordion-header',
  collapsible: true
});

Answer 2

好的，事实证明，使用手风琴小部件本身很容易实现这一点。只需按照这种方式设置手风琴：

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

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

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

jQuery UI中类似手风琴的单元素扩展组件

2 个答案: