使用jQuery/JS打開時，使<details>標記具有動畫效果

Question

我只想將HTML5 詳細信息的內容標記爲'滑動'/ animate打開，而不是立即彈出打開/出現。這可能與jQuery/JavaScript？

Fiddle

HTML：

<details> 
<summary>Show/Hide</summary> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet metus auctor tempor dignissim. Nunc tempor ligula malesuada, adipiscing justo quis, ultrices libero. Curabitur pretium odio sagittis lorem euismod, a ultrices sem ultrices. Integer sapien nibh, mollis id pretium id, dignissim ut dui. Nam sit amet lectus lectus. Cras scelerisque risus a dui accumsan, in dignissim dolor sodales. Nunc aliquam pharetra dui, a consectetur velit lobortis vel.</p> 
<p>Mauris convallis orci in semper aliquam. Ut mollis laoreet nibh pretium tincidunt. Donec aliquam at odio sit amet dictum. Phasellus sapien leo, feugiat sit amet sagittis in, congue vel lectus. Donec elementum est vitae nulla interdum laoreet. Curabitur fringilla a tellus non laoreet. Aliquam vel lectus convallis massa pulvinar pellentesque. Mauris laoreet pharetra turpis vel tristique. Sed ligula ligula, sodales sed auctor in, aliquam sit amet lorem. Etiam vestibulum, libero vel dignissim ultrices, lacus mauris lacinia enim, quis aliquam nibh mauris eu mauris. Etiam sapien leo, dapibus et libero sed, laoreet ornare tellus.</p> 
<p>Sed placerat vehicula magna et adipiscing. Nam euismod nibh ut tellus tempor, eget lobortis metus iaculis. In laoreet, enim in dignissim pellentesque, felis augue tincidunt massa, vestibulum fringilla mauris sapien in diam. Duis interdum molestie fermentum. Aenean dictum varius augue, id luctus neque viverra id. Nam eleifend tempus mauris in mattis. Sed id risus non magna semper blandit in vel arcu. Suspendisse quis nisi ligula. Fusce vestibulum at enim eu.</p> 
</details> 

Answer 1

太糟糕了一個簡單的CSS過渡，不能使用。

因此，我會建議先包裝summary元素的同級元素，然後在其上使用.slideToggle()。這並不是那麼簡單，但您需要將open屬性添加到details，並在默認情況下隱藏內部包裹的元素。

這隻適用於使用e.preventDefault()來防止默認功能;但是，您需要重寫箭頭指示符（►，▼）。

你會使用summary::-webkit-details-marker和display:none移除不再是工作的標記，並通過:before/:after僞元素添加自己的自定義標記。

UPDATED EXAMPLE HERE

$('details summary').each(function(){ 
    $(this).nextAll().wrapAll('<div id="wrap"></div>'); 
}); 
$('details').attr('open','').find('#wrap').css('display','none'); 
$('details summary').click(function(e) { 
    e.preventDefault(); 
    $(this).siblings('div#wrap').slideToggle(function(){ 
     $(this).parent('details').toggleClass('open'); 
    }); 
}); 

CSS：

summary::-webkit-details-marker { 
    display: none; 
} 
summary:before { 
    content: "►"; 
} 
details.open summary:before { 
    content: "▼"; 
} 

如果你想details元素是默認打開的，加class="open"而不是屬性open，然後使用此：$('details.open div#wrap').css('display','block');

ALTERNATIVE EXAMPLE - （默認情況下打開）

Answer 2

基於@JoshCrozier's answer，我制定了使用open屬性而不是額外open類的解決方案。這樣你不必改變CSS。

如果你想用css來改變<details>元素的外觀，您可以使用相同的樣式規則不管瀏覽器是否支持<details>元素，也不管的JavaScript是否在瀏覽器中啓用，因爲你只需要考慮open屬性，並且不需要特殊的類。

另外，在包裝元素上沒有特別的id，這使得解決方案稍微更健壯一些。

此外，此解決方案需要<details>默認情況下應打開的元素。

$('details summary').each(function() { 
    var $Wrapper = $(this).nextAll().wrapAll('<div></div>').parent(); 
    // Hide elements that are not open by default 
    if(!$(this).parent('details').attr('open')) 
     $Wrapper.hide(); 
    $(this).click(function(Event) { 
     Event.preventDefault(); 
     if($(this).parent('details').attr('open')) { 
     $Wrapper.slideUp(function() { 
      // Remove the open attribute after sliding so, so the animation is visible in browsers supporting the <details> element 
      $(this).parent('details').removeAttr('open'); 
     }); 
     } else { 
     // Add the open attribute before sliding down, so the animation is visible in browsers supporting the <details> element 
     $(this).parent('details').attr('open', true); 
     $Wrapper.slideDown(); 
     } 
    }); 
});