jQuery Mobile 移除頂部圓角

Question

我有一個 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");

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"到折疊集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();

演示

Answer 2

刪除類並通過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/