web庖丁解牛98，按不二老师的代码运行，没有显示折叠效果,Web开发,技术交流,鱼C论坛

小脑斧 发表于 2020-4-27 16:42:31

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

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

   }
   #collapse{
         width:888px;
   }
   #collapse article{
         width: 888px;
         background: #FF0088;
         border-bottom: 2px solid rgba(255,255,255,.22);
   }
   #collapse h1{
         background: #56f232;
         color: #f2285a;

         height: 88px;
         line-height: 88px;
         text-align: center;

         margin: 0;
         font-size: 32px;

         position: relative;
         cursor:pointer;

         transition: all .6s;
         user-select: none;
   }
   #collapse h1:hover{
         background: #000000;
   }
   #collapse h1:after{
         content: '';
         width: 0;
         height: 0;

         border-width: 10px;
         border-style: dashed;
         position: absolute;
         border-color: #FFFFFF transparent transparent transparent;

         right: 50px;
         top: 37px;
   }
   #collapse p{
         margin: 0;
         padding: 33px;
         text-indent: 22px;
         font-size: 25px;
   }
   #collapse h1.hide::after{
         border-color: transparent #f2285a transparent transparent;
         right: 22px;
         top: 37px;
   }
   #collapse p.hide{
         display: none;
   }
</style>
<script src="jquery-2.1.4.min.js"></script>
<script type="text/javascript">
   var title= document.getElementsByTagName("h1");
   var arcticle = document.getElementsByTagName("article");

   foldAll();
   functionfoldAll() {
         for (var i = 0; i<title.length; i++){
            article.getElementsByTagName("p").className = "hide";
            title.className = "hide";
         }

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

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

显示结果如图：

而老师的效果图是：

请问哪一步出问题了是不是js里的第二个for循环？，怎么改呢

乘号发表于 2020-4-27 17:09:58

@不二如是
不二~
你的代码出bug了？

不二如是 发表于 2020-4-27 17:16:32

哪里出bug{:10_281:}

小脑斧 发表于 2020-4-27 17:35:51

不二如是发表于 2020-4-27 17:16
哪里出bug

出不来效果{:10_266:}

不二如是 发表于 2020-4-28 08:34:40

控制台看有什么报错吗？

wp231957 发表于 2020-4-28 09:00:03

不二如是发表于 2020-4-28 08:34
控制台看有什么报错吗？

一楼代码再html标签得外层又多了一对 p 标签
去除后，控制台无错，渲染效果无折叠

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

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

   }
   #collapse{
         width:888px;
   }
   #collapse article{
         width: 888px;
         background: #FF0088;
         border-bottom: 2px solid rgba(255,255,255,.22);
   }
   #collapse h1{
         background: #56f232;
         color: #f2285a;

         height: 88px;
         line-height: 88px;
         text-align: center;

         margin: 0;
         font-size: 32px;

         position: relative;
         cursor:pointer;

         transition: all .6s;
         user-select: none;
   }
   #collapse h1:hover{
         background: #000000;
   }
   #collapse h1:after{
         content: '';
         width: 0;
         height: 0;

         border-width: 10px;
         border-style: dashed;
         position: absolute;
         border-color: #FFFFFF transparent transparent transparent;

         right: 50px;
         top: 37px;
   }
   #collapse p{
         margin: 0;
         padding: 33px;
         text-indent: 22px;
         font-size: 25px;
   }
   #collapse h1.hide::after{
         border-color: transparent #f2285a transparent transparent;
         right: 22px;
         top: 37px;
   }
   #collapse p.hide{
         display: none;
   }
</style>

</head>
<body>
<section id="collapse">
<article>
   <h1>5.1庆典1</h1>
   <p>小说是以刻画人物形象为中心，通过完整的故事情节和环境描写来反映社会生活的文学体裁。
         “小说”出自《庄子·外物》。人物、情节、环境是小说的三要素。情节一般包括开端、发展、高潮
         、结局四部分，有的包括序幕、尾声。环境包括自然环境和社会环境。小说按照篇幅及容量可分为长篇、
         中篇、短篇和微型.</p>
</article>

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

for (var i = 0; i<title.length; i++){
   title.onclick = function () {
         refreshCollapse(this);
   }
}}
foldAll();
functionrefreshCollapse(obj) {
   var targClass;
   if (obj.className ==="hide"){
         targClass = "";
   }else{
         targClass = "hide";
   }
   foldAll();
   obj.parentNode.getElementsByTagName("p").className = targClass;
   obj.className = targClass;
}
</script>
</body>
</html>

小脑斧 发表于 2020-4-28 10:44:13

wp231957 发表于 2020-4-28 09:17
搞定：
几点错误：
1、html标签得外层p 标签去除

好的，那个p我也不知道怎么冒出来的，源代码也没有p
确实是拼写错误加位置犯错这些问题，感谢{:10_297:}

页: [1]

鱼C论坛's Archiver

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