javascript - jQuery Mobile 移除顶部圆 Angular

Question

我有一个包含 <ul> 的 DIV和一个 <li>得到一个漂亮的标题。下面是一个collapsibleset .问题是它有 ui-corner-all类(class)。如果我删除类，我的可折叠集上将不再有圆 Angular 。尝试添加 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");

Answer 1

更新

仅从 collapsibleset 的顶部移除 border-radius。

.ui-collapsible-set > .ui-collapsible.ui-corner-all {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
}

---

只需将 data-corners="false" 添加到 collapseibleset 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();

Demo