Question

阅读jQuery Mobile的文档，创建一个可折叠元素，您需要使用h1-h6或legend元素。

由于在标题部分我需要显示不同的信息（标题，日期和数量），我想知道在h#标记中包含复杂结构是否正确。换句话说，这是一个有效的HTML结构吗？

根据这个讨论Is there a way to use something other than a header tag to indicate a header in jQuery Mobile collapsible block?，传说元素可能没问题，但我没有使用表格。

任何食谱？

Answer 1

如果您从 HTML 的角度来看，这不是有效的 HTML 。

当然你可以忽视这一点。重点是，如果jQuery Mobile开发人员不关心有效的 HTML ，那么您也不需要关心。

让我向你证明，在增强标准可折叠之前看起来像这样：

<div data-role="collapsible">
    <h6>Heading</h6>
    <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>

增强后看起来像这样：

<div data-role="collapsible" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-collapsed">
    <h6 class="ui-collapsible-heading ui-collapsible-heading-collapsed"><a class="ui-collapsible-heading-toggle ui-btn ui-fullsize ui-btn-icon-left ui-btn-up-c" href="#" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="plus" data-iconpos="left" data-theme="c" data-mini="false">
        <span class="ui-btn-inner">
            <span class="ui-btn-text">Heading
                <span class="ui-collapsible-heading-status"> click to expand contents</span>
            </span>
            <span class="ui-icon ui-icon-plus ui-icon-shadow">&nbsp;</span>
        </span>
        </a>
    </h6>
    <div class="ui-collapsible-content ui-collapsible-content-collapsed" aria-hidden="true">

        <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
    </div>
</div>

正如您所看到的， h6 充满了其他内容。所以请随意改变你想要的任何东西。

在jQuery Mobile中在可折叠标头内注入复杂结构的配方

1 个答案: