切斷角落jquery手機可摺疊套裝

Question

我想切斷可摺疊套裝中jquery手機標頭的左上角。

這裏是我的HTML：

<div data-role="content" id="one" class="ui-content" role="main"> 
    <div data-role="collapsible-set" data-corners="false"> 
     <div data-role="collapsible" data-collapsed="false" data-theme="f" data-content-theme="f" class="cornered ui-collapsible-heading"> 
      <h3>Witness</h3> 
      <p>Content for witness tab. Content for witness tab. Content for witness tab. Content for witness tab. Content for witness tab. Content for witness tab. </p> 
     </div> 
     <div data-role="collapsible" data-theme="e" data-content-theme="e"> 
      <h3>Victim</h3> 
      <p>Content for Victim tab. Content for victim tab. Content for Victim tab. Content for victim tab. Content for Victim tab. Content for victim tab. </p> 
     </div> 
     <div data-role="collapsible" data-theme="d" data-content-theme="d"> 
      <h3>Information</h3> 
      <p>25% of Chinese women have experienced domestic violence.</p> 
     </div> 
    </div> 
</div> 

我的CSS：

.cornered { 
    width: 176px; 
    height: 0px; 
    border-bottom: 40px solid #30C2DF; 
    border-left: 40px solid transparent; 
} 

加入少量的自定義CSS我可以做一個隔斷角落，但在jQuery的我找不到地方後.mobile.css進行更改，因爲如果我將class = cornered添加到我的div，它只會在標題左側添加剪切角並且不會影響標題本身。

這種方法也改變了我可摺疊設置中標題的寬度，並在展開時將內容放在其他標題的後面（例如見照片）。

Answer 1

我想出了一個解決方案接近我原來的。

我加入：

.cornered1 {} 

.cornered1 .ui-collapsible-heading 
{ 
    height:0px; 
    border-bottom: 40px solid #30C2DF; 
    border-left: 40px solid transparent; 
} 

我然後交替的顏色邊界離開標籤來出現彼此堆疊：結果的

.cornered2 {} 

.cornered2 .ui-collapsible-heading 
{ 
    height:0px; 
    border-bottom: 40px solid #de1f26; 
    border-left: 40px solid #30C2DF;; 
} 

截圖：

Answer 2

jQuery Mobile的使用.ui-corner-*類添加圓角。你有一個選擇是刪除文檔準備就緒的類。一個例子是$("[data-role='collapsible-set']").removeClass("ui-corner-all");讓我知道這是否工作，或者如果您有任何問題:)