设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › web庖丁解牛98，按不二老师的代码运行，没有显示折叠效 ...
返回列表 发新帖
查看: 1885|回复: 7

[已解决]web庖丁解牛98，按不二老师的代码运行，没有显示折叠效果

[复制链接]
小脑斧
发表于 2020-4-27 16:42:31 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
原主题：https://fishc.com.cn/thread-84757-1-1.html
我的代码如下（用的WS）：
  1. <p><!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>98折叠</title>
  6.     <style type="text/css">
  7.         body{
  8.             color: #FFFFFF;
  9.             background: #50f299;
  10.             margin: 333px;
  11.             font-family: "华文宋体";

  13.         }
  14.         #collapse{
  15.             width:888px;
  16.         }
  17.         #collapse article{
  18.             width: 888px;
  19.             background: #FF0088;
  20.             border-bottom: 2px solid rgba(255,255,255,.22);
  21.         }
  22.         #collapse h1{
  23.             background: #56f232;
  24.             color: #f2285a;

  26.             height: 88px;
  27.             line-height: 88px;
  28.             text-align: center;

  30.             margin: 0;
  31.             font-size: 32px;

  33.             position: relative;
  34.             cursor:pointer;

  36.             transition: all .6s;
  37.             user-select: none;
  38.         }
  39.         #collapse h1:hover{
  40.             background: #000000;
  41.         }
  42.         #collapse h1:after{
  43.             content: '';
  44.             width: 0;
  45.             height: 0;

  47.             border-width: 10px;
  48.             border-style: dashed;
  49.             position: absolute;
  50.             border-color: #FFFFFF transparent transparent transparent;

  52.             right: 50px;
  53.             top: 37px;
  54.         }
  55.         #collapse p{
  56.             margin: 0;
  57.             padding: 33px;
  58.             text-indent: 22px;
  59.             font-size: 25px;
  60.         }
  61.         #collapse h1.hide::after{
  62.             border-color: transparent #f2285a transparent transparent;
  63.             right: 22px;
  64.             top: 37px;
  65.         }
  66.         #collapse p.hide{
  67.             display: none;
  68.         }
  69.     </style>
  70.     <script src="jquery-2.1.4.min.js"></script>
  71.     <script type="text/javascript">
  72.         var title= document.getElementsByTagName("h1");
  73.         var arcticle = document.getElementsByTagName("article");

  75.         foldAll();
  76.         function  foldAll() {
  77.             for (var i = 0; i<title.length; i++){
  78.                 article[i].getElementsByTagName("p")[0].className = "hide";
  79.                 title[i].className = "hide";
  80.             }

  82.         for (var i = 0; i<title.length; i++){
  83.             title[i].onclick = function () {
  84.                 refreshCollapse(this);
  85.             }
  86.         }}
  87.         function  refreshCollapse(obj) {
  88.             var targClass;
  89.             if (obj.className ==="hide"){
  90.                 targClass = "";
  91.             }else{
  92.                 targClass = "hide";
  93.             }
  94.             foldAll();
  95.             obj.parentNode.getElementsByTagName("p")[0].className = targClass;
  96.             obj.className = targClass;
  97.         }
  98.     </script>
  99. </head>
  100. <body>
  101. <section id="collapse">
  102.     <article>
  103.         <h1>5.1庆典1</h1>
  104.         <p>小说是以刻画人物形象为中心，通过完整的故事情节和环境描写来反映社会生活的文学体裁。
  105.             “小说”出自《庄子·外物》。人物、情节、环境是小说的三要素。情节一般包括开端、发展、高潮
  106.             、结局四部分，有的包括序幕、尾声。环境包括自然环境和社会环境。 小说按照篇幅及容量可分为长篇、
  107.             中篇、短篇和微型.</p>
  108.     </article>

  110.     <article>
  111.         <h1>庆典2</h1>
  112.         <p>小说是以刻画人物形象为中心，通过完整的故事情节和环境描写来反映社会生活的文学体裁。“小说”出自《庄子·外物》。人物、情节、环境是小说的三要素。情节一般包括开端、发展、高潮、结局四部分，有的包括序幕、尾声。环境包括自然环境和社会环境。 小说按照篇幅及容量可分为长篇、中篇、短篇和微型.</p>
  113.     </article>
  114.     <article>
  115.         <h1>庆典3</h1>
  116.         <p>小说是以刻画人物形象为中心，通过完整的故事情节和环境描写来反映社会生活的文学体裁。“小说”出自《庄子·外物》。人物、情节、环境是小说的三要素。情节一般包括开端、发展、高潮、结局四部分，有的包括序幕、尾声。环境包括自然环境和社会环境。 小说按照篇幅及容量可分为长篇、中篇、短篇和微型.</p>
  117.     </article>
  118. </section>
  119. </body>
  120. </html></p>
复制代码




显示结果如图： Scan.jpg

而老师的效果图是： 185441k6xz1rj87q1og8jz.gif

请问哪一步出问题了是不是js里的第二个for循环？，怎么改呢
最佳答案
月排行榜 / 总排行榜
wp231957
2020-4-28 09:17:42
本帖最后由 wp231957 于 2020-4-28 09:27 编辑
小脑斧 发表于 2020-4-27 17:35
出不来效果


搞定：
几点错误：
1、html标签得外层p 标签 去除
2、主要script 标签  移到body得bom标签之后
3、有一个 arcticle 变量拼写错误
4、<script src="jquery-2.1.4.min.js"></script> 这个文件不知道你有没有
     如果没有请再head标签中 添加：<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
同时删除<script src="jquery-2.1.4.min.js"></script>

提醒：调试html代码 请开F12

正确源码：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  6.     <title>98折叠</title>
  7.     <style type="text/css">
  8.         body{
  9.             color: #FFFFFF;
  10.             background: #50f299;
  11.             margin: 333px;
  12.             font-family: "华文宋体";

  14.         }
  15.         #collapse{
  16.             width:888px;
  17.         }
  18.         #collapse article{
  19.             width: 888px;
  20.             background: #FF0088;
  21.             border-bottom: 2px solid rgba(255,255,255,.22);
  22.         }
  23.         #collapse h1{
  24.             background: #56f232;
  25.             color: #f2285a;

  27.             height: 88px;
  28.             line-height: 88px;
  29.             text-align: center;

  31.             margin: 0;
  32.             font-size: 32px;

  34.             position: relative;
  35.             cursor:pointer;

  37.             transition: all .6s;
  38.             user-select: none;
  39.         }
  40.         #collapse h1:hover{
  41.             background: #000000;
  42.         }
  43.         #collapse h1:after{
  44.             content: '';
  45.             width: 0;
  46.             height: 0;

  48.             border-width: 10px;
  49.             border-style: dashed;
  50.             position: absolute;
  51.             border-color: #FFFFFF transparent transparent transparent;

  53.             right: 50px;
  54.             top: 37px;
  55.         }
  56.         #collapse p{
  57.             margin: 0;
  58.             padding: 33px;
  59.             text-indent: 22px;
  60.             font-size: 25px;
  61.         }
  62.         #collapse h1.hide::after{
  63.             border-color: transparent #f2285a transparent transparent;
  64.             right: 22px;
  65.             top: 37px;
  66.         }
  67.         #collapse p.hide{
  68.             display: none;
  69.         }
  70.     </style>
  71.    
  72.    
  73. </head>
  74. <body>
  75. <section id="collapse">
  76.     <article>
  77.         <h1>5.1庆典1</h1>
  78.         <p>小说是以刻画人物形象为中心，通过完整的故事情节和环境描写来反映社会生活的文学体裁。
  79.             “小说”出自《庄子·外物》。人物、情节、环境是小说的三要素。情节一般包括开端、发展、高潮
  80.             、结局四部分，有的包括序幕、尾声。环境包括自然环境和社会环境。 小说按照篇幅及容量可分为长篇、
  81.             中篇、短篇和微型.</p>
  82.     </article>

  84.     <article>
  85.         <h1>庆典2</h1>
  86.         <p>小说是以刻画人物形象为中心，通过完整的故事情节和环境描写来反映社会生活的文学体裁。“小说”出自《庄子·外物》。人物、情节、环境是小说的三要素。情节一般包括开端、发展、高潮、结局四部分，有的包括序幕、尾声。环境包括自然环境和社会环境。 小说按照篇幅及容量可分为长篇、中篇、短篇和微型.</p>
  87.     </article>
  88.     <article>
  89.         <h1>庆典3</h1>
  90.         <p>小说是以刻画人物形象为中心，通过完整的故事情节和环境描写来反映社会生活的文学体裁。“小说”出自《庄子·外物》。人物、情节、环境是小说的三要素。情节一般包括开端、发展、高潮、结局四部分，有的包括序幕、尾声。环境包括自然环境和社会环境。 小说按照篇幅及容量可分为长篇、中篇、短篇和微型.</p>
  91.     </article>
  92. </section>
  93. <script type="text/javascript">
  94.     var title= document.getElementsByTagName("h1");
  95.     var arcticle = document.getElementsByTagName("article");
  96.     function  foldAll() {
  97.         for (var i = 0; i<title.length; i++){
  98.             arcticle[i].getElementsByTagName("p")[0].className = "hide";
  99.             title[i].className = "hide";
  100.         }

  102.     for (var i = 0; i<title.length; i++){
  103.         title[i].onclick = function () {
  104.             refreshCollapse(this);
  105.         }
  106.     }}
  107.     foldAll();
  108.     function  refreshCollapse(obj) {
  109.         var targClass;
  110.         if (obj.className ==="hide"){
  111.             targClass = "";
  112.         }else{
  113.             targClass = "hide";
  114.         }
  115.         foldAll();
  116.         obj.parentNode.getElementsByTagName("p")[0].className = targClass;
  117.         obj.className = targClass;
  118.     }
  119. </script>
  120. </body>
  121. </html>
复制代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

乘号
发表于 2020-4-27 17:09:58 | 显示全部楼层
@不二如是
不二~
你的代码出bug了？
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

不二如是
发表于 2020-4-27 17:16:32 | 显示全部楼层
哪里出bug
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

小脑斧
 楼主| 发表于 2020-4-27 17:35:51 | 显示全部楼层
不二如是 发表于 2020-4-27 17:16
哪里出bug

出不来效果
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

不二如是
发表于 2020-4-28 08:34:40 | 显示全部楼层
控制台看有什么报错吗？
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

wp231957
发表于 2020-4-28 09:00:03 | 显示全部楼层
不二如是 发表于 2020-4-28 08:34
控制台看有什么报错吗？

一楼代码 再html标签得外层 又多了一对 p 标签
去除后，控制台 无错，渲染效果  无折叠
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

wp231957
发表于 2020-4-28 09:17:42 | 显示全部楼层    本楼为最佳答案   
本帖最后由 wp231957 于 2020-4-28 09:27 编辑
小脑斧 发表于 2020-4-27 17:35
出不来效果


搞定：
几点错误：
1、html标签得外层p 标签 去除
2、主要script 标签  移到body得bom标签之后
3、有一个 arcticle 变量拼写错误
4、<script src="jquery-2.1.4.min.js"></script> 这个文件不知道你有没有
     如果没有请再head标签中 添加：<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
同时删除<script src="jquery-2.1.4.min.js"></script>

提醒：调试html代码 请开F12

正确源码：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  6.     <title>98折叠</title>
  7.     <style type="text/css">
  8.         body{
  9.             color: #FFFFFF;
  10.             background: #50f299;
  11.             margin: 333px;
  12.             font-family: "华文宋体";

  14.         }
  15.         #collapse{
  16.             width:888px;
  17.         }
  18.         #collapse article{
  19.             width: 888px;
  20.             background: #FF0088;
  21.             border-bottom: 2px solid rgba(255,255,255,.22);
  22.         }
  23.         #collapse h1{
  24.             background: #56f232;
  25.             color: #f2285a;

  27.             height: 88px;
  28.             line-height: 88px;
  29.             text-align: center;

  31.             margin: 0;
  32.             font-size: 32px;

  34.             position: relative;
  35.             cursor:pointer;

  37.             transition: all .6s;
  38.             user-select: none;
  39.         }
  40.         #collapse h1:hover{
  41.             background: #000000;
  42.         }
  43.         #collapse h1:after{
  44.             content: '';
  45.             width: 0;
  46.             height: 0;

  48.             border-width: 10px;
  49.             border-style: dashed;
  50.             position: absolute;
  51.             border-color: #FFFFFF transparent transparent transparent;

  53.             right: 50px;
  54.             top: 37px;
  55.         }
  56.         #collapse p{
  57.             margin: 0;
  58.             padding: 33px;
  59.             text-indent: 22px;
  60.             font-size: 25px;
  61.         }
  62.         #collapse h1.hide::after{
  63.             border-color: transparent #f2285a transparent transparent;
  64.             right: 22px;
  65.             top: 37px;
  66.         }
  67.         #collapse p.hide{
  68.             display: none;
  69.         }
  70.     </style>
  71.    
  72.    
  73. </head>
  74. <body>
  75. <section id="collapse">
  76.     <article>
  77.         <h1>5.1庆典1</h1>
  78.         <p>小说是以刻画人物形象为中心，通过完整的故事情节和环境描写来反映社会生活的文学体裁。
  79.             “小说”出自《庄子·外物》。人物、情节、环境是小说的三要素。情节一般包括开端、发展、高潮
  80.             、结局四部分，有的包括序幕、尾声。环境包括自然环境和社会环境。 小说按照篇幅及容量可分为长篇、
  81.             中篇、短篇和微型.</p>
  82.     </article>

  84.     <article>
  85.         <h1>庆典2</h1>
  86.         <p>小说是以刻画人物形象为中心，通过完整的故事情节和环境描写来反映社会生活的文学体裁。“小说”出自《庄子·外物》。人物、情节、环境是小说的三要素。情节一般包括开端、发展、高潮、结局四部分，有的包括序幕、尾声。环境包括自然环境和社会环境。 小说按照篇幅及容量可分为长篇、中篇、短篇和微型.</p>
  87.     </article>
  88.     <article>
  89.         <h1>庆典3</h1>
  90.         <p>小说是以刻画人物形象为中心，通过完整的故事情节和环境描写来反映社会生活的文学体裁。“小说”出自《庄子·外物》。人物、情节、环境是小说的三要素。情节一般包括开端、发展、高潮、结局四部分，有的包括序幕、尾声。环境包括自然环境和社会环境。 小说按照篇幅及容量可分为长篇、中篇、短篇和微型.</p>
  91.     </article>
  92. </section>
  93. <script type="text/javascript">
  94.     var title= document.getElementsByTagName("h1");
  95.     var arcticle = document.getElementsByTagName("article");
  96.     function  foldAll() {
  97.         for (var i = 0; i<title.length; i++){
  98.             arcticle[i].getElementsByTagName("p")[0].className = "hide";
  99.             title[i].className = "hide";
  100.         }

  102.     for (var i = 0; i<title.length; i++){
  103.         title[i].onclick = function () {
  104.             refreshCollapse(this);
  105.         }
  106.     }}
  107.     foldAll();
  108.     function  refreshCollapse(obj) {
  109.         var targClass;
  110.         if (obj.className ==="hide"){
  111.             targClass = "";
  112.         }else{
  113.             targClass = "hide";
  114.         }
  115.         foldAll();
  116.         obj.parentNode.getElementsByTagName("p")[0].className = targClass;
  117.         obj.className = targClass;
  118.     }
  119. </script>
  120. </body>
  121. </html>
复制代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

小脑斧
 楼主| 发表于 2020-4-28 10:44:13 | 显示全部楼层
wp231957 发表于 2020-4-28 09:17
搞定：
几点错误：
1、html标签得外层p 标签 去除

好的，那个p我也不知道怎么冒出来的，源代码也没有p
确实是拼写错误加位置犯错这些问题，感谢
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-5-1 21:39

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表