如何更改jquerymobile中可摺疊集合摺疊對象的主題

Question

我正在使用jquery mobile 我有一個可摺疊集合，其中包含三個可摺疊項目 ，並且想要在擴展時從javascript代碼更改項目的主題。 並在摺疊時將其歸還爲正常主題

注意：我不想更改整個可摺疊設置項目。 只是摺疊或擴大。

Answer 1

不幸的是，collapsible不接受動態變化的主題，因此，你需要做的是添加/刪除程序類。

Demo

jQuery Mobile的

$(document).on('expand collapse', '#col1, #col2, #col3', function (e) { 
if (e.type == 'expand') { 
    var oldclass = 'ui-btn-up-d ui-body-d'; 
    var newclass = 'ui-btn-up-e ui-body-e'; 
    $(this).find('a').removeClass(oldclass + ' ui-btn-hover-d').addClass(newclass + ' ui-btn-hover-e'); 
    $(this).find('.ui-collapsible-content').removeClass(oldclass).addClass(newclass); 
    } 
    if (e.type == 'collapse') { 
    var oldclass = 'ui-btn-up-e ui-body-e'; 
    var newclass = 'ui-btn-up-d ui-body-d'; 
    $(this).find('a').removeClass(oldclass + ' ui-btn-hover-e').addClass(newclass + ' ui-btn-hover-d'); 
    $(this).find('.ui-collapsible-content').removeClass(oldclass).addClass(newclass); 
    } 
}); 

HTML

<div data-role="collapsible-set" data-theme="c" data-content-theme="d"> 
<div data-role="collapsible" id="col1"> 
    <h3>Section 1</h3> 

    <p>I'm the collapsible content for section 1</p> 
</div> 
<div data-role="collapsible" id="col2"> 
    <h3>Section 2</h3> 

    <p>I'm the collapsible content for section 2</p> 
</div> 
<div data-role="collapsible" id="col3"> 
    <h3>Section 3</h3> 

    <p>I'm the collapsible content for section 3</p> 
</div> 
</div> 

---

相關：https://stackoverflow.com/a/15789387/1771795

Answer 2

看到這個小提琴：

jQuery Mobile的不支持主題collapsibles直接更改，所以你必須使用刪除類的手工方法，然後添加新的類。

var oldclass = 'ui-btn-up-b ui-body-b'; 
    var newclass = 'ui-btn-up-d ui-body-d'; 
    $('[data-role=collapsible]').find('a').toggleClass(oldclass + ' ui-btn-hover-b').toggleClass(newclass + ' ui-btn-hover-d'); 
    $('[data-role=collapsible]').find('.ui-collapsible-content').toggleClass(oldclass).toggleClass(newclass); 

鏈接：http://jsfiddle.net/cDmdh/

Answer 3

試試這個。

$(".selector").collapsible({ collapsed: false }); 

來源：http://api.jquerymobile.com/collapsible/