jquery - jquery详细信息标签替代

Question

是否有一个简单的 jquery 解决方案与 html5 详细信息标签具有相同的下拉功能？我看过一些插件，但它们似乎都有 ie 的错误。我认为现在最好只用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>

或者

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