切角 jquery mobile 可折叠套装答案

【问题标题】：cut off corners jquery mobile collapsible sets切角 jquery mobile 可折叠套装
【发布时间】：2013-04-20 00:32:11
【问题描述】：

我想在一个可折叠的集合中剪掉一个 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 中，它只会添加切角页眉左侧的离角，不会影响页眉本身。

这种方法还改变了我的可折叠集合中标题的宽度，并在展开时使内容落在其他标题后面（例如，参见照片）。

【问题讨论】：

标签： html css jquery-mobile

【解决方案1】：

jQuery Mobile 使用.ui-corner-* 类来添加圆角。您拥有的一种选择是删除 doc ready 上的类。一个例子是$("[data-role='collapsible-set']").removeClass("ui-corner-all");让我知道这是否有效，或者如果你有任何问题:)

【讨论】：

感谢 asifrc 的回复。我尝试将您提供的代码添加到我的 jquery.mobile.js 并且没有成功。我在包含可折叠集的 div 中有 data-corners="false" 所以我不知道是否 .ui-corner-*是否干扰它。

【解决方案2】：

我想出了一个接近我最初的解决方案。

我补充说：

.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;;
}

结果截图：

【讨论】：