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

Question

以下内容适用于 Firefox，但不适用于其他浏览器。

在不同浏览器中的父子关系是否不同？

$('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也是无效的。根据 DT 的规范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 标记内，因此您的代码无法正常工作。