2

我正在使用 jquery mobile 我有一个可折叠的集合，其中包含三个可折叠的项目，并且想要在扩展时从 javascript 代码中更改项目的主题。并在折叠时将其恢复为正常主题

注意：我不想更改整个可折叠设置项。只是折叠或展开的。

4

3 回答 3

5

不幸的是，collapsible它不接受动态更改主题，因此，您需要以编程方式添加/删除类。

演示

jQuery 移动

$(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

于 2013-06-18T18:11:31.480 回答
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/

于 2013-06-18T18:04:40.467 回答
0

尝试这个。

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

来自：http ://api.jquerymobile.com/collapsible/

于 2013-12-20T14:42:45.247 回答