[英]jQuery Mobile remove top rounded corners
我有一个 DIV,它包含一个<ul>
和一个<li>
以获得一个不错的标题。 下面是一个collapsibleset
。 问题是它有ui-corner-all
类。 如果我删除该类,我的可折叠集上将不再有圆角。 尝试添加ui-corner-bottom
但没有任何反应。
$("#mydiv ul").append(
"<div data-role='collapsibleset' data-theme='a' data-content-theme='a' style='margin: 0'>"
+"<div data-role='collapsible'>"
+"<h3>Section 1</h3>"
+"<p>I'm the collapsible content for section 1</p>"
+"</div>"
+"<div data-role='collapsible'>"
+"<h3>Section 2</h3>"
+"<p>I'm the collapsible content for section 2</p>"
+"</div>"
+"<div data-role='collapsible' class='ui-last-child'>"
+"<h3>Section 3</h3>"
+"<p>I'm the collapsible content for section 3</p>"
+"</div>"
+"</div>"
).trigger("create");
// not working -> //$("#mydiv div").removeClass("ui-corner-all").addClass("ui-corner-bottom").trigger("create");
仅从collapsibleset的顶部移除border-radius
。
.ui-collapsible-set > .ui-collapsible.ui-corner-all {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
只需将data-corners="false"
到折叠集div。 此外,使用.enhanceWithin()
而不是.trigger("create")
因为它在 jQM 1.4 中已被弃用。
$("#mydiv ul").append("<div data-role='collapsibleset' data-theme='a' data-content-theme='a' style='margin: 0' data-corners='false'>"
+"<div data-role='collapsible'>"
+"<h3>Section 1</h3>"
+"<p>I'm the collapsible content for section 1</p>"
+"</div>"
+"<div data-role='collapsible'>"
+"<h3>Section 2</h3>"
+"<p>I'm the collapsible content for section 2</p>"
+"</div>"
+"<div data-role='collapsible' class='ui-last-child'>"
+"<h3>Section 3</h3>"
+"<p>I'm the collapsible content for section 3</p>"
+"</div>"
+"</div>").enhanceWithin();
删除类并通过css添加圆角:
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
您可以使用此工具生成代码: http : //border-radius.com/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.