展开与收起效果_学习笔记

首页免费课展开与收起效果笔记

展开与收起效果

                
                zongran
            Web前端工程师

                    查看讲师更多课程 
                    zongran讲师的其他课程
                
商城分类导航效果
初级·63737
免费课程
                                
                难度初级
            
                时长 1小时 0分
            
                学习人数
            
综合评分9.73
                            101人评价
                        查看评价
                                9.7
                                内容实用
                            
                                9.8
                                简洁易懂
                            
                                9.7
                                逻辑清晰

最热最新

慕粉3176499

getElementById style.display innerHTML href="javascript:hidediv()"

查看全部

0 采集收起来源：编程练习
2018-03-22
慕粉1355137269

$(function(){ $('#strHref').on('click',function(){ $('#hpn').toggle(1000); }); }) ;

查看全部

0 采集收起来源：编程练习
2016-12-26
慕数据0204790

previousSibling，代表处于同一树层级之前紧跟的元素，之后紧跟的元素属性为nextSibling。注意，一定是同一树层级

查看全部

0 采集收起来源：练习题
2016-12-04
慕数据0204790

previousSibling，代表处于同一树层级之前紧跟的元素，之后紧跟的元素属性为nextSibling。注意，一定是同一树层级

查看全部

0 采集收起来源：练习题
2016-12-04
Abby诺亚

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>自动展开</title> <style type="text/css"> body{ margin:0px; padding:0px;} #pn{width:auto; background:#ccc; height:500px; text-align:center; margin:0px auto; line-height:100px; display:block; overflow:hidden;} p.slide{ width:900px; height:100px; text-align:center; background:#eeeeee; line-height:100px; margin:0px auto; } /*设置广告和正文的CSS样式*/ </style> <script type="text/javascript"> var w = 0; //增加广告宽度函数 function addw(){ if(w < 900){ w +=2;

查看全部

0 采集收起来源：编程挑战
2018-03-22
Abby诺亚

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> body { margin: 0 auto; padding: 0px; } #pn { background: #e8e8e8; width: 600px; height: auto; margin: 0 auto; padding: 5px; font-size: 9pt; } .slide { margin: 0; padding: 0; width: 600px; border-top: solid 4px gray; margin: 0 auto; } .btn-slide { background: gray; text-decoration: none; text-align: center; width: 120px; height: 30px; padding: 10px 0 0 0; display: block; color: #FFF; margin: 0 auto; } </style>

查看全部

0 采集收起来源：编程练习
2018-03-22
恬靖 00:50

jQuery中的toggle()方法

查看全部

0 采集收起来源：jQuery实现点击按钮展开和收起动画效果
2016-11-19
学之舟_36820

jQuery新版本变动 .toggle(function, function, … ) 方法删除这个方法绑定两个或多个处理程序到匹配的元素，用来执行交替的点击事件。它不应该被混同于显示或隐藏匹配元素.toggle( )方法，因为它没有过时。前者被删除，以减少混乱和提高模块化程度。jQuery Migrate（迁移）插件可以恢复此功能。自行扩展原理：绑定点击事件，参数调用由计数取模决定。支持引用jQuery-2.0版本以上。 $.fn.extend({ toggle: function () { var _arguments = arguments; for (var i=0; i<$(this).length; i++) { var count = 0; $(this).on("click",function () { _arguments[count % _arguments.length](); count++; }) } return $(this); } });

查看全部

0 采集收起来源：编程练习
2018-03-22
LittleBocchi

要在图片加载完毕后改变其大小，应用【图片】的onload事件

查看全部

0 采集收起来源：练习题
2016-11-10
biuabiuabiu

//课后思考 window.onload = function(){ var as = document.getElementsByTagName("a"); for(var i = 0;i < as.length;i++){ if(as[i].innerHTML == "全文"){ as[i].onclick =function(){ showdiv(this);}} if (as[i].innerHTML == "收起全文") { as[i].onclick =function(){ hidediv(this);}}}} function showdiv(obj) { var contents = document.querySelectorAll(".content"); var titles = document.querySelectorAll(".zhaiyao"); for (var i = 0; i < contents.length; i++) { contents[i].style.display = "none"; }; for (var i = 0; i < titles.length; i++) { titles[i].style.display = "block";}; var y = obj.parentNode; y.style.display = "none"; var x = y.nextSibling; if(x.nodeType != 1){ x=x.nextSibling; } x.style.display = "block";} // 隐藏函数 function hidediv(obj) { var x = obj.parentNode.parentNode; x.style.display = "none"; var y = x.previousSibling; if(y.nodeType != 1){ y=y.previousSibling;} y.style.display = "block";}

查看全部

0 采集收起来源：回顾总结
2018-03-22
朝夕ing 03:16

结构图

查看全部

0 采集收起来源：使用JavaScript实现展开效果
2016-10-23
朝夕ing 01:57

nextSibling和previousSibling是同一层级

查看全部

0 采集收起来源：使用JavaScript实现展开效果
2016-10-23
qweqwe13123123 01:02

判断是否是节点元素。

查看全部

0 采集收起来源：浏览器兼容性
2016-10-18
qweqwe13123123 01:35

nextSibling 返回某个元素之后紧跟的元素 previousSibling 返回某节点之前紧跟的节点

查看全部

0 采集收起来源：使用JavaScript实现展开效果
2016-10-18
qweqwe13123123 03:54

toggle 原来还可以这样用，可以。

查看全部

0 采集收起来源：jQuery实现点击按钮展开和收起动画效果
2016-10-18