jQuery UI中類似手風琴的展開組件

我需要在jQuery UI中實現展開/摺疊框。摺疊時，只顯示框標題。展開後，將會顯示標題+內容。jQuery UI中類似手風琴的展開組件

我需要做的是非常接近jQuery UI one-element手風琴與alwaysOpen = false（相同的屬性在文檔中被稱爲「collapsible」，但在實踐中使用jQuery 1.3.2和jQuery UI 1.6rc6它似乎要alwaysOpen）：

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

有一個問題：我需要展開/摺疊只發生在左側的三角形點擊時，點擊了整個頭部不能當。

另外一個要求是我想使用jQuery UI的默認UI樣式，而不是實現我自己的樣式表，這樣我就可以用themeRoller滾動新樣式（如果需要的話）。 jQuery UI中的手風琴風格（包括標題中的箭頭）非常適合於此目的。

現在，我有兩個選擇：

1）配置摺疊菜單，以便只有三角響應展開/摺疊事件。我需要點擊標題的其餘部分基本上被忽略。 2）實現我自己的小部件，使用手風琴風格作爲基礎。

我寧願做1），但我很難弄清楚如何讓只有箭頭響應點擊事件。

因此，至於實際問題，你會如何做到這一點？

來源

2009-02-25 Jaanus

爲此，您可以簡單地使用jQuery沒有根據UI插件。你想作爲答案嗎？ – hunter 2009-02-25 18:16:13

好的，事實證明用手風琴小部件本身很容易做到這一點。剛剛成立的手風琴了這種方式：

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

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

雖然它是不好的易用性做法，因爲點擊目標區域是如此之小，但很好，它回答我張貼的問題。

來源

2009-02-25 22:04:42 Jaanus

我做了這樣的：

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

來源

2012-11-03 12:29:03 Xander

jQuery UI中類似手風琴的展開組件

回答

相關問題