Question

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

$('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也无效。根据{{3}}，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标记内，并且您的代码无效。

jquery切换在Firefox中工作的dt元素，而不是其他浏览器

1 个答案: