在`dl`下的`span`中分组`dt`和`dd`

时间:2014-07-09 14:06:29

标签: javascript html angularjs

我正在尝试在dt中显示或隐藏某些dd / dl个群组。这是有效的HTML吗?浏览器应该抱怨这个还是合法的?我查看了dl规范,但找不到任何说明dl可以包含dtdd个孩子以外的内容的内容。我需要这样做,因为我正在使用angularJS,这提供了添加或删除DOM

中元素的简洁方法
<dl>
  <dt>Term</dt>
  <dd>Definition</dd>

  <span ng-if="true">
    <dt>Term 2</dt>
    <dd>Definition 2</dd>
  </span>
</dl>

3 个答案:

答案 0 :(得分:1)

div中的dl分组现在对WHATWG HTML有效,请参阅 https://html.spec.whatwg.org/multipage/semantics.html#the-dl-element

  

dl元素

     

内容模型:

     

:零个或多个组,每个组由一个或多个dt元素组成,后跟一个或多个dd元素,可选地与支持脚本的元素混合。

     

或者:一个或多个div元素,可选地与支持脚本的元素混合。

<dl>
 <div>
  <dt> Last modified time </dt>
  <dd> 2004-12-23T23:33Z </dd>
 </div>
 <div>
  <dt> Recommended update interval </dt>
  <dd> 60s </dd>
 </div>
 <div>
  <dt> Authors </dt>
  <dt> Editors </dt>
  <dd> Robert Rothman </dd>
  <dd> Daniel Jackson </dd>
 </div>
</dl>

答案 1 :(得分:0)

这可能适用于大多数浏览器,但它不是有效的HTML。它也可能打破一些CSS。您可能只需要使用2 ng-if指令

<dt ng-if="true">Term 2</dt>
<dd ng-if="true">Definition 2</dd>

请注意,如果您需要执行诸如迭代项目列表之类的操作,则可以使用角度ng-repeat-startng-repeat-end

<dt ng-repeat-start="item in list">Term 2</dt>
<dd ng-repeat-end>Definition 2</dd>

答案 2 :(得分:0)

这不是有效的HTML5,因为dl元素的内容模型是

  

零个或多个组,每个组由一个或多个dt元素组成   后跟一个或多个dd元素,可选择混合使用   script-supporting elements

因此dl无法包含span,但大多数浏览器都会正确呈现它。

我建议使用di元素,而不是span。它们也是无效的HTML5,但在XHTML2中有效。

<dl>
  <dt>Term</dt>
  <dd>Definition</dd>
  <di ng-if="true">
    <dt>Term 2</dt>
    <dd>Definition 2</dd>
  </di>
</dl>

然而,缺点是旧IE无法识别di,因此除非您在加载文档时使用document.createElement('di'),否则它不会将CSS样式应用于它们。 / p>