如何动态更改JQM中的数据主题以实现可折叠？

Question

我需要在按钮点击上执行此操作，该按钮位于collapsible，所以我这样做：

my_button.closest('div[data-theme="b"]').find('a.ui-btn-up-b').toggleClass('ui-btn-up-b ui-btn-up-d');

但不幸的是仍然有一些风格需要改变，但我不知道哪个......

Answer 1

更新回答

由于动态解决方案不适用于可折叠，因此这是一个手动解决方案。

<强> Working demo

代码

$('#button').on('click', function () {
 var oldclass = 'ui-btn-up-b ui-body-b';
 var newclass = 'ui-btn-up-d ui-body-d';
 $('[data-role=collapsible]').find('a').removeClass(oldclass  + ' ui-btn-hover-b').addClass(newclass + ' ui-btn-hover-d');
 $('[data-role=collapsible]').find('.ui-collapsible-content').removeClass(oldclass).addClass(newclass);
});

---

Why collapsible data-theme cant be changed dynamically?

---

旧答案

不幸的是，下面的动态解决方案令人惊讶不起作用。

其中.selector是可折叠的ID。

$('button').on('click', function () {

 // change the theme
 $( ".selector" ).collapsible( "option", "theme", "a" );

 // apply new styles
 $( ".selector" ).collapsible().trigger('create');

});