HTML5 中的 detail 模签 及 jquery 的实现

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 的效果:

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

代码如下:

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

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

GD Star Rating
a WordPress rating system

本文一共 195 个汉字, 你数一下对不对.

扫描二维码，分享本文到微信朋友圈