0

我想在一个可折叠的集合中切断一个 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 它只会添加切角标题的左侧，并且不影响标题本身。

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

在此处输入图像描述

4

2 回答 2

0

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

我补充说：

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

结果截图：

在此处输入图像描述

于 2013-04-25T14:44:12.350 回答
0

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

于 2013-04-20T06:18:47.623 回答