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

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也是无效的。根据specifications of the DT tag，dt标签只需要inline元素，而h3标签不是嵌入式标签。为什么这很重要？因为不同的浏览器处理无效文档的方式不同。火狐，在这种情况下，踢了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标记内，并且您的代码不起作用。