鱼C论坛

 找回密码
 立即注册
查看: 2354|回复: 18

[庖丁解牛] 0 0 9 7 -打造#鱼C-7周年庆典的"折叠区域图层"|【预热】

[复制链接]
回帖奖励 30 鱼币 回复本帖可获得 6 鱼币奖励! 每人限 1 次
发表于 2017-3-26 18:55:23 | 显示全部楼层 |阅读模式
购买主题 已有 3 人购买  本主题需向作者支付 5 鱼币 才能浏览

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-3-26 19:52:06 | 显示全部楼层

回帖奖励 +6 鱼币

六周年庆典时候是怎么庆祝的
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-28 13:34:51 | 显示全部楼层

回帖奖励 +6 鱼币

好贵啊!!!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-3-28 21:01:50 | 显示全部楼层


真的贵吗?
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-7-23 16:05:12 | 显示全部楼层

回帖奖励 +6 鱼币

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-7-24 09:06:54 | 显示全部楼层

回帖奖励 +6 鱼币

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-8-9 09:40:18 | 显示全部楼层

回帖奖励 +6 鱼币

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-8-10 17:49:33 | 显示全部楼层

回帖奖励 +6 鱼币

支持楼主
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-8-11 13:04:35 | 显示全部楼层

回帖奖励 +6 鱼币

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-8-15 12:16:06 | 显示全部楼层

回帖奖励 +6 鱼币

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-8-29 14:56:41 | 显示全部楼层

回帖奖励 +6 鱼币

不二老师偷懒啊 如果有多段内容<p>1</p><p>2</p>的话,就很迷了 得修改一下隐藏和显示函数
for(var j = 0; j < nump.length; j++){
        article[i].getElementsByTagName("p")[j].className = "hide";
}
//article[i].getElementsByTagName("p")[0].className = "hide";
title[i].className = "hide";
//
var newnump = obj.parentNode.getElementsByTagName("p");
        for(var k = 0; k < newnump.length;k++){
obj.parentNode.getElementsByTagName("p")[k].className = targClass;
}
//obj.parentNode.getElementsByTagName("p")[0].className = targClass;
obj.className = targClass;
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-8-29 14:57:21 | 显示全部楼层
漏了一句
var nump = article[i].getElementsByTagName("p");
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-9-15 21:52:07 | 显示全部楼层

回帖奖励 +6 鱼币

本帖最后由 幽梦三影 于 2018-9-16 09:44 编辑

jQuery改版
  1. $(document).ready(function(){
  2.                     var title = $('h1')
  3.                     var article = $('p')
  4.                     article.css('display','none')
  5.                    
  6.                     var s = true
  7.                     title.eq(0).click(function(){
  8.                             change(0, s)
  9.                             s =! s
  10.                     })
  11.                     var w = true
  12.                     title.eq(1).click(function(){
  13.                             change(1, w)
  14.                             w =! w
  15.                     })
  16.                     var k = true
  17.                     title.eq(2).click(function(){
  18.                             change(2, k)
  19.                             k =! k
  20.                     })
  21.                     function change(i, t){
  22.                             article.eq(i).toggle(100,function(){
  23.                                     t ? title.eq(i).addClass('hide') : title.eq(i).removeClass('hide')
  24.                             })
  25.                     }
  26.             })
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-10-7 17:17:50 | 显示全部楼层

回帖奖励 +6 鱼币

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

头像被屏蔽
发表于 2018-11-30 13:49:18 | 显示全部楼层

回帖奖励 +6 鱼币

提示: 作者被禁止或删除 内容自动屏蔽
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-12-22 15:29:28 | 显示全部楼层

回帖奖励 +6 鱼币

看看
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-1-12 22:18:57 | 显示全部楼层

回帖奖励 +6 鱼币

虽然没有学js但是还是了解了实现原理,就是通过修改p标签的display属性来实现显示与隐藏吧?手动也能实现相同的原理。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-4-21 10:14:56 | 显示全部楼层

回帖奖励 +6 鱼币

等我看看js基础,直接代码有点猛
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-4-24 16:58:35 | 显示全部楼层
折叠效果没有出来
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-3-29 07:12

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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