JQuery Mobile可摺疊內容

Question

我一直在尋找使用http://jquerymobile.com/demos/1.0a2/docs/content/content-collapsible.html爲我正在建設的網站。

有沒有辦法更改用於展開和摺疊節的圖標。在mooment我看不到一種方法來改變它從+和 - 圖標。

客戶會喜歡箭頭或不同的圖標。

感謝，慈安

Answer 1

有很多方法可以做到這一點。你可以用Javascript來做，但最好稍微改變一下CSS。

您可以專門的CSS爲的.ui圖標加/減它們嵌套時的.ui可摺疊，包含有看起來像是另一個圖標相同：

前：

/*arrows*/ 
.ui-icon-arrow-r { background-position: -108px 0; } 
.ui-icon-arrow-l { background-position: -144px 0; } 
.ui-icon-arrow-u { background-position: -180px 0; } 
.ui-icon-arrow-d { background-position: -216px 0; } 

後：（使用實施例右和向下箭頭代替）

/*arrows*/ 
.ui-collapsible-contain .ui-collapsible-heading .ui-icon-plus, 
.ui-icon-arrow-r { background-position: -108px 0; } 
.ui-icon-arrow-l { background-position: -144px 0; } 
.ui-icon-arrow-u { background-position: -180px 0; } 
.ui-collapsible-contain .ui-collapsible-heading .ui-icon-minus, 
.ui-icon-arrow-d { background-position: -216px 0; } 

釷在這種情況下，它不會改變這個特殊情況下除了加/減按鈕外的一般外觀！

編輯：謝謝J0ttE更新此代碼jQuery Mobile的1.0版本：

/*arrows*/ 
.ui-collapsible.ui-collapsible-collapsed .ui-collapsible-heading .ui-icon-plus, 
.ui-icon-arrow-r { background-position: -108px 0; } 
.ui-icon-arrow-l { background-position: -144px 0; } 
.ui-icon-arrow-u { background-position: -180px 0; } 
.ui-collapsible .ui-collapsible-heading .ui-icon-minus, 
.ui-icon-arrow-d { background-position: -216px 0; } 

Answer 2

我更新埃裏克·加格農的代碼以匹配jQuery Mobile的1.0

/*arrows*/ 
.ui-collapsible.ui-collapsible-collapsed .ui-collapsible-heading .ui-icon-plus, 
.ui-icon-arrow-r { background-position: -108px 0; } 
.ui-icon-arrow-l { background-position: -144px 0; } 
.ui-icon-arrow-u { background-position: -180px 0; } 
.ui-collapsible .ui-collapsible-heading .ui-icon-minus, 
.ui-icon-arrow-d { background-position: -216px 0; }