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標記內，並且您的代碼不起作用。