jquery 在 dt 元素上切换在 Firefox 中工作，但在其他浏览器中不可用

Question

以下内容适用于 Firefox，但不适用于其他浏览器。 <dl>s的父子关系在不同浏览器中是否不同？

$('dd').parent().find('h3').toggle(
    function(){
        $(this).next('dd').slideDown(500);
    },
    function(){
        $(this).next('dd').slideUp(500);
    }
);

HTML 看起来像：

<dt><h3>stuff to be clicked</h3></dt>
<dd><p>stuff in dd might look like this with internal elements</p>
    <ul>
        <li>stuff1</li>
        <li>stuff2 </li>
        <li>stuff3 </li>
   </ul>
</dd>

Answer 1

你的函数逻辑是错误的，但它在 firefox 中工作，因为它处理你的 HTML 与其他浏览器不同。

next() 函数查看相关元素的直接兄弟。您正在 h3 元素上执行此操作：

<dt><h3>stuff to be clicked</h3></dt>

如您所见，h3 标记没有直接的兄弟姐妹。它没有兄弟姐妹（因此没有next()）。

那么为什么 Firefox 可以工作？因为你的 HTML 也是无效的。根据specifications of the DT tag，dt 标签只需要inline 元素，而h3 标签不是内联标签。为什么这很重要？因为不同的浏览器对无效文档的处理方式不同。在这种情况下，Firefox 会踢掉h3 标签或dt 标签，让您的文档结构如下所示：

<dt></dt>
<h3>stuff to be clicked</h3>
<dd><p>stuff in dd might look like this with internal elements</p>
    <ul>
        <li>stuff1</li>
        <li>stuff2 </li>
        <li>stuff3 </li>
   </ul>
</dd>

所以在 Firefox 的情况下，h3 元素实际上变成了带有dd 标签的兄弟元素，并且您的代码可以正常工作。但是，在其他浏览器中（例如经过测试的 Chrome），h3 标记仍保留在dt 标记内，因此您的代码不起作用。