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

鱼C论坛

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

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

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

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

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

x
原主题：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();
        function  foldAll() {
            for (var i = 0; i<title.length; i++){
                article[i].getElementsByTagName("p")[0].className = "hide";
                title[i].className = "hide";
            }

        for (var i = 0; i<title.length; i++){
            title[i].onclick = function () {
                refreshCollapse(this);
            }
        }}
        function  refreshCollapse(obj) {
            var targClass;
            if (obj.className ==="hide"){
                targClass = "";
            }else{
                targClass = "hide";
            }
            foldAll();
            obj.parentNode.getElementsByTagName("p")[0].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>



显示结果如图： 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

正确源码：
<!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");
    function  foldAll() {
        for (var i = 0; i<title.length; i++){
            arcticle[i].getElementsByTagName("p")[0].className = "hide";
            title[i].className = "hide";
        }

    for (var i = 0; i<title.length; i++){
        title[i].onclick = function () {
            refreshCollapse(this);
        }
    }}
    foldAll();
    function  refreshCollapse(obj) {
        var targClass;
        if (obj.className ==="hide"){
            targClass = "";
        }else{
            targClass = "hide";
        }
        foldAll();
        obj.parentNode.getElementsByTagName("p")[0].className = targClass;
        obj.className = targClass;
    }
</script>
</body>
</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

正确源码：
<!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");
    function  foldAll() {
        for (var i = 0; i<title.length; i++){
            arcticle[i].getElementsByTagName("p")[0].className = "hide";
            title[i].className = "hide";
        }

    for (var i = 0; i<title.length; i++){
        title[i].onclick = function () {
            refreshCollapse(this);
        }
    }}
    foldAll();
    function  refreshCollapse(obj) {
        var targClass;
        if (obj.className ==="hide"){
            targClass = "";
        }else{
            targClass = "hide";
        }
        foldAll();
        obj.parentNode.getElementsByTagName("p")[0].className = targClass;
        obj.className = targClass;
    }
</script>
</body>
</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-12-23 19:57

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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