我升级我的网站以使用<details>标记，以便于访问。
我的问题是这个。当＆＃34;打开＆＃34;属性在<details>标记上设置，如下所示：
<details open>
<summary>more info</summary>
<ul>
<li>blah</li>
</ul>
</details>
关于<ul>标记的CSS术语有什么不同吗？似乎display: block设置它是否可见。
我尝试编写前端测试以检查单击元素时<ul>是否可见，并且我不确定如何在没有实际不同的情况下执行此操作CSS。
JSFiddle：http://jsfiddle.net/6x2Kc/
答案 0 :(得分：3)
就如何检测能见度而言，Mathijs Flietstra的答案似乎符合要求。
关于CSS实际上在做什么的更广泛的事情，HTML5规范在这里有话要说：http://www.w3.org/html/wg/drafts/html/master/rendering.html#the-details-element-0
它说：
... [details]元素应该呈现为“块”框，其“padding-left”属性设置为“40px”，表示从左到右的元素（特定于LTR）及其'对于从右到左的元素，padding-right'属性设置为'40px'。元素的影子树应该采用元素的第一个子摘要元素（如果有的话），并将其放在第一个“块”框容器中，然后获取元素的剩余后代（如果有的话），并将它们放在第二个“块”中盒子容器。
第一个容器应包含至少一个行框，并且该行框应包含一个公开窗口小部件（通常为三角形），水平放置在details元素的左边距内。该小部件应允许用户请求显示或隐藏详细信息。
第二个容器的'overflow'属性设置为'hidden'。当details元素没有open属性时，应该从渲染中删除第二个容器。
换句话说，摘要元素之外的details元素的内容将放入匿名块框中。 （这有点类似于如果你创建一个元素display:table-cell然后它将被包装在用于表行，表行组和表的匿名框中。）这是这个匿名框（从而它的内容）隐藏或显示，这就是为什么你看不到CSS指定的值改变你选择的任何元素，只有计算值。
尽管有警告。我们还没有很多细节元素的实现，上面的spec文本不要求浏览器这样做，它只是说“期望”，所以其他浏览器可能选择通过其他方式实现效果。我们只能等待发现。
答案 1 :(得分：1)
在Chrome中，当ul关闭时，height的{{1}}和width属性的计算值会更改为auto。这是 jsFiddle ，当您点击details时会提醒ul的身高。
答案 2 :(得分：0)
设置open元素的<details>属性可确定内容的高度是自然高度还是零。如果存在open，则高度将是内容的正常高度，如果属性不存在，或者内容切换为关闭，则高度为零。这是一个快速 jsFiddle example 。