jquery详细信息标记替代

Question

是否有一个简单的jquery解决方案可以执行与html5详细信息标记相同的下拉功能？我看过一些插件，但它们看起来都很麻烦。我认为现在用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方式？

Answer 1

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

OR

<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(); });