点击展开显示折叠内容

举报
lxw1844912514 发表于 2022/03/26 23:46:53 2022/03/26
【摘要】 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> /* ...

  
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style type="text/css">
  7. /* 折叠列表*/
  8. .Huifold .item {
  9. position: relative
  10. }
  11. .Huifold .item h4 {
  12. margin: 0;
  13. font-weight: bold;
  14. position: relative;
  15. border-top: 1px solid #fff;
  16. font-size: 15px;
  17. line-height: 22px;
  18. padding: 7px 10px;
  19. background-color: #eee;
  20. cursor: pointer;
  21. padding-right: 30px
  22. }
  23. .Huifold .item h4 b {
  24. position: absolute;
  25. display: block;
  26. cursor: pointer;
  27. right: 10px;
  28. top: 7px;
  29. width: 16px;
  30. height: 16px;
  31. text-align: center;
  32. color: #666
  33. }
  34. .Huifold .item .info {
  35. display: none;
  36. padding: 10px
  37. }
  38. </style>
  39. </head>
  40. <body>
  41. <div style="width: 80%">
  42. <ul id="Huifold1" class="Huifold">
  43. <li class="item">
  44. <h4>标题<b>+</b></h4>
  45. <div class="info"> 内容<br>很多内容</div>
  46. </li>
  47. <li class="item">
  48. <h4>标题<b>+</b></h4>
  49. <div class="info"> 内容<br>很多内容</div>
  50. </li>
  51. <li class="item">
  52. <h4>标题<b>+</b></h4>
  53. <div class="info"> 内容<br>很多内容</div>
  54. </li>
  55. </ul>
  56. </div>
  57. </body>
  58. <script type="text/javascript" src="http://www.videochat.com/lib/jquery/1.9.1/jquery.min.js"></script>
  59. <script type="text/javascript" src="http://www.videochat.com/static/h-ui/js/H-ui.js"></script>
  60. <script type="text/javascript">
  61. jQuery.Huifold = function(obj,obj_c,speed,obj_type,Event){
  62. if(obj_type == 2){
  63. $(obj+":first").find("b").html("-");
  64. $(obj_c+":first").show()}
  65. $(obj).bind(Event,function(){
  66. if($(this).next().is(":visible")){
  67. if(obj_type == 2){
  68. return false}
  69. else{
  70. $(this).next().slideUp(speed).end().removeClass("selected");
  71. $(this).find("b").html("+")}
  72. }
  73. else{
  74. if(obj_type == 3){
  75. $(this).next().slideDown(speed).end().addClass("selected");
  76. $(this).find("b").html("-")}else{
  77. $(obj_c).slideUp(speed);
  78. $(obj).removeClass("selected");
  79. $(obj).find("b").html("+");
  80. $(this).next().slideDown(speed).end().addClass("selected");
  81. $(this).find("b").html("-")}
  82. }
  83. })};
  84. $(function () {
  85. $.Huifold("#Huifold1 .item h4", "#Huifold1 .item .info", "fast", 2, "click"); /*5个参数顺序不可打乱,分别是:相应区,隐藏显示的内容,速度,类型,事件*/
  86. });
  87. </script>
  88. </html>

文章来源: blog.csdn.net,作者:lxw1844912514,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/lxw1844912514/article/details/107915173

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200