如何在JQM中动态更改数据主题以使其可折叠? [英] How to dynamically change data-theme in JQM for collapsible?

问题描述

我需要在 collapsible 中单击按钮时执行此操作，所以我要做像这样:

I need to do this action on button click, which is in the collapsible, so i do it like:

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

但是不幸的是，仍然有一些样式需要更改，但我不知道该...

But unfortunately there still remains some styles which needs to be changed, but i don't know which...

推荐答案

更新的答案

由于动态解决方案不适用于可折叠，因此这里提供了手动解决方案.

Updated answer

Since the dynamic solution doesn't work for collapsible, here is a manual solution.

工作演示

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?

---

Old answer

不幸的是，以下动态解决方案令人惊讶地不起作用.

Unfortunately, the below dynamic solution surprisingly doesn't work.

.selector是可折叠ID.

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

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

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

});

这篇关于如何在JQM中动态更改数据主题以使其可折叠?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！