jquery（手機）：使用翻轉開關來改變可摺疊的主題

Question

我有一堆可摺疊的設置，每個內部都是一個用於發佈數據的翻轉開關。 結果（工作）是

-itemA YES 
-itemB NO 
-itemC YES 
... 
-itemZ NO 

我想有一個視覺線索，一組被選擇（開關被設定內隱藏的，所以在閉合時，我有，如果它被選擇沒有線索）

我發現我可以使用主題來改變外觀，但是如何更改僅作爲開關父級的可摺疊設置的主題。

Answer 1

可以更改可摺疊的小部件的特定主題類「亮點」吧，這裏有一個例子：

//setup the classes and theme letters to use for on/off states 
var classes = { 
     on : 'ui-btn-up-e ui-body-e', 
     off : 'ui-btn-up-c ui-body-c' 
    }, 
    themes = { 
     on : 'e', 
     off : 'c' 
    }; 

//delegate the event handler binding for all toggle switches 
$(document).on('change', '.ui-slider-switch', function() { 

    //if the switch is "off" 
    if ($(this).val() == 'off') { 

     //find the parent collapsible widget of this switch, change its theme, 
     //find the descendant header link and change it's theme attribute as well as class, 
     //then go back to the collapsible selection and find the content wrapper 
     //and change it's class to the "off" state class 
     $(this).closest('.ui-collapsible').attr('data-theme', themes.off).find('a').attr('data-theme', themes.off).removeClass(classes.on).addClass(classes.off) 
       .end().find('.ui-collapsible-content').removeClass(classes.on).addClass(classes.off); 
    } else { 

     //this does the same but backwards to make the "on" or active state 
     $(this).closest('.ui-collapsible').attr('data-theme', themes.on).find('a').attr('data-theme', themes.on).removeClass(classes.off).addClass(classes.on) 
       .end().find('.ui-collapsible-content').removeClass(classes.off).addClass(classes.on); 
    } 
});​ 

而且演示：http://jsfiddle.net/ZtJyL/

有些文檔：

• http://jquerymobile.com/demos/1.1.0-rc.1/docs/content/content-collapsible.html
• http://jquerymobile.com/demos/1.1.0-rc.1/docs/forms/switch/events.html

注意，classes對象我創建存儲兩個類on，兩個用於off，這兩個類將使用classes對象時被添加/刪除從一個元素。我在JSFiddle中看不到有任何衝突，但請注意，這是一條不必要的捷徑。