jQuery的詳細信息標籤替代

有沒有一個簡單的jQuery解決方案，可以執行與html5 details標籤相同的下拉功能？我已經看過一些插件，但他們似乎都與越野車。我認爲最好現在就用jquery來做？jQuery的詳細信息標籤替代

HTML5的方式（但是，這並不在IE瀏覽器）

<details> 
    <summary>Details Summary</summary> 
    <p>Pellentesque aliquet lacinia libero id sodales. Curabitur nibh velit, varius in semper ac, suscipit quis magna. Phasellus faucibus venenatis leo ut convallis. Maecenas tempus risus id nibh iaculis vehicula. Aenean vel quam lorem, et sagittis velit. Nullam a ligula lectus, at iaculis mauris. Mauris id tempus dolor. </p> 
</details>

jquery的方式嗎？

來源

2013-10-07 simple

但這至少顯示在IE中的內容，是否正確？因此，您只需檢測瀏覽器是否支持詳細信息標籤，如果不支持，請隱藏段落標籤，然後在適當時顯示。不需要插件。 –

<details> 
    <summary>Details Summary</summary> 
    <p>Pellentesque aliquet lacinia libero...</p> 
</details>

<div class="details"> 
    <div class="summary">Details Summary</div> 
    <p>Pellentesque aliquet lacinia libero...</p> 
</div>

調整下面的代碼相應地

details > p{display:none;} 

$('body').on('click', 'details summary',function() { $(this).find('p').toggle(); });

來源

2013-10-07 21:43:21 Zholen

jQuery的詳細信息標籤替代

回答

相關問題