HTML5 中的 detail 模签及 jquery 的实现

JustYY.com 小赖子的英国生活和资讯

8 years ago

HTML5 中新添加了一个标签 detail, 用法举例如下:

<details>
  <summary>小赖子的英国生活和资讯.</summary>
  https://justyy.com
</details>

<details>
  <summary>小赖子的英国生活和资讯.</summary>
  https://justyy.com
</details>

如果你的浏览器支持HTML5并且支持这个标签的话显示结果如下 (由于AMP不支持 details 和 summary 标签所以自行脑补, 其实点击 ▶ 才会显示/隐藏下面的文字):

▶ 小赖子的英国生活和资讯.
https://justyy.com

根据w3school, 微软的IE/Edge浏览器暂不支持, 所以估计得用一个简单的javascript (Jquery) 来 toggle 文本的显示. 如以下则用 jquery 来模拟 details 的效果:

▶ 小赖子的英国生活和资讯.

https://justyy.com

代码如下:

jQuery(document).ready(function() {
  jQuery('#example_label1').click(function() {
     jQuery('#example_d1').toggle();
  });
});

jQuery(document).ready(function() {
  jQuery('#example_label1').click(function() {
     jQuery('#example_d1').toggle();
  });
});

还是有细微差别的比如在展开的时候右三角会变成下三角而这个则没有考虑到, 不过你明白这个原理就可以了.

微信公众号: 小赖子的英国生活和资讯 JustYYUK