如何更改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/