Question

我有一个onclick处理程序中使用的方法，来自jQuery Mobile中可折叠的内容。

这种方法的想法是访问可折叠并使可折叠按钮变为绿色，以便在查看折叠集合时将所有项目折叠起来。

无论我尝试过什么，我都没有成功。

我试图添加一个自定义主题文件并调用.attr（＆＃34; data-theme＆＃34;，＆＃34; b＆＃34;），但无济于事。我还试图添加一个自定义类，但不起作用。

问题是，它是动态的，所以当页面第一次切换到它时没有任何自定义样式。只有在单击可折叠X的内容中的元素时，才应将X转换为绿色背景色。

在运行时检查元素时，我可以看到它附加新属性和/或正确，但它不会渲染。

我尝试在添加样式后调用.trigger（＆＃34;创建＆＃34;）也无济于事。

我试过的一些例子。该元素的id为＆＃34; Stop＆＃34; + id动态插入集合时，我只是用它来找到正确的元素来尝试样式。这工作，我可以看到它被附加到正确的元素。

function markAsOk(id, index)
{


//Color the line green, use set id (computed, less costly than find by attribute value ,    switch to swatch B = green
$( "#Stop" + id ).attr("data-theme", "b");

$( "#Stop" + id ).attr("data-content-theme", "b");

//$( "#Stop" + id ).enhanceWithin(); */



$( "#Stop" + id ).trigger("create");

//Refresh main list
$( "#activestopslist" ).trigger("create");


}

在此之上，可折叠的动态声明如下：

html += "<div data-role=\"collapsible\" id=\"Stop" + activeObj.id + "\" data-wonum =  
\"" + activeObj.id + "\" data-index = \"" + activeObj.index + "\">";

//Set content
html += "<h3>" + activeObj.name + "</h3>"; 

html += "<a href=# onclick=\"markAsOk(" + activeObj.id + "," + activeObj.index  + 
")\"><img src = \"resources/okicon.png\" /></a>  <img src=\"resources/failicon.png\">"; 

//Icons for buttons        
html += "<p>" + processInstructions(activeObj.instructions) + "</p>"; 




//End tag
html += "</div>";

在这里，您还可以看到onclick事件，添加到内容中嵌入的ok按钮...

我似乎需要一些建议。

Answer 1

如果您只是想尝试更改可折叠标题的颜色，则不需要主题样本。而是为绿色着色创建一个CSS规则，例如：

.greenCollHeader {
    background-color: #7FAF1B !important;
    text-shadow: #aaa 0 1px 0 !important;
}

然后在您的图片上单击，只需将此类添加到可折叠小部件中类.ui-collapsible-heading-toggle的链接：

$("#Stop" + id).find(".ui-collapsible-heading-toggle").addClass("greenCollHeader");

<强> DEMO

动态改变jQuery Mobile的颜色可折叠

1 个答案: