代码之家 › 专栏 › 技术社区 › Jaanus

类似jquery ui中的一个元素扩展组件

expander accordion jquery

1

Jaanus · 技术社区 · 16 年前

我需要在jQueryUI中实现一个展开/折叠框。折叠时,只显示框标题。展开后,将显示标题+内容。

我需要做的是非常接近jquery ui一个符合alwaysopen=false的元素(同样的属性在文档中称为“可折叠”,但实际上jquery 1.3.2和jquery ui 1.6rc6似乎是alwaysopen):

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

有一个问题: 我只需要单击左侧的三角形,而不是单击整个标题时,才会发生展开/折叠。

另外一个要求是,我希望使用jquery ui默认的ui样式,而不是实现我自己的样式表,这样我就可以在需要时使用主题滚动器滚动新的样式。jquery ui中的手风琴样式(包括标题中的箭头)非常适合这个目的。

现在,我有两个选择:

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

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

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

那么,对于实际问题,你会怎么做?

2 回复 | 直到 12 年前

1

Xander 12 年前

我是这样做的:

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

2

0

Jaanus 16 年前

好吧,事实证明,使用Accordion小部件本身很容易实现这一点。把手风琴调成这样:

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

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

尽管这是一个糟糕的可用性实践,因为点击目标区域太小了,但是它回答了我发布的问题。