亚洲欧洲日产国码aⅴ,久久96国产精品久久

首頁免費課展開與收起效果筆記

展開與收起效果

                
                zongran
            Web前端工程師

                    查看講師更多課程 
                    zongran講師的其他課程
                
商城分類導航效果
初級·63733
免費課程
                                
                難度初級
            
                時長 1小時 0分
            
                學習人數(shù)
            
綜合評分9.73
                            101人評價
                        查看評價
                                9.7
                                內(nèi)容實用
                            
                                9.8
                                簡潔易懂
                            
                                9.7
                                邏輯清晰

最熱最新

ModelSue

ceshi我要測試

查看全部

0 采集收起來源：效果簡介
2021-08-09
0408aodiZhang

（）

查看全部

0 采集收起來源：使用HTML/CSS實現(xiàn)靜態(tài)布局
2018-11-26
慕碼人8106482

模糊

查看全部

0 采集收起來源：練習題
2018-10-16
一米陽光0704 00:19

1.9版本以上都廢除toggle了，用if代替

查看全部

0 采集收起來源：靜態(tài)布局制作
2018-10-07
哈爾波兒

QQ閱讀類似的展開收起
<!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: 0;
? ? ? ? ? ? font-size: 9pt;
? ? ? ? ? ? line-height: 180%;
? ? ? ? }
? ? ? ? #pn
? ? ? ? {
? ? ? ? ? ? background: #f8f8f8;
? ? ? ? ? ? height: auto;
? ? ? ? ? ? width: 750px;
? ? ? ? ? ? margin: 0 auto;
? ? ? ? ? ? padding: 5px;
? ? ? ? }
? ? ? ? .artTitle
? ? ? ? {
? ? ? ? ? ? font-weight: bold;
? ? ? ? ? ? color: #3030FF;
? ? ? ? ? ? font-size: 11pt;
? ? ? ? }
? ? ? ? .subTitle
? ? ? ? {
? ? ? ? ? ? color: #CCC;
? ? ? ? }
? ? ? ? .content
? ? ? ? {
? ? ? ? ? ? border: 1px solid #CCC;
? ? ? ? ? ? display: none;
? ? ? ? ? ? padding: 5px;
? ? ? ? }
? ? ? ? .btm
? ? ? ? {
? ? ? ? ? ? text-align: right;
? ? ? ? ? ? height: 30px;
? ? ? ? }
? ? ? ? .btn
? ? ? ? {
? ? ? ? ? ? width: 80px;
? ? ? ? ? ? height: 20px;
? ? ? ? ? ? padding: 5px 3px 5px 3px;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? text-decoration: none;
? ? ? ? ? ? background: #f0f0f0;
? ? ? ? ? ? border: 1px solid #CCC;
? ? ? ? }
? ? </style>
? ? <script type="text/javascript">
? ? ? ??
? ? ? ? // 顯示函數(shù)
? ? ? ? function showdiv(obj){
var x=obj.parentNode;
var y=x.nextSibling;
if(y.nodeType!=1){
y=y.nextSibling;
}
y.style.display="block";
x.style.display="none";
}
function hidediv(obj){
var y=obj.parentNode.parentNode;
var x=y.previousSibling;
if(x.noneTyoe!=1){
x=x.previousSibling;
}
x.style.display="block";
y.style.display="none";?
? ?
? ? ? ? }

? ? </script>
</head>
<body>
? ? <div id="pn">
? ? ? ? <div id="art0">
? ? ? ? ? ? <p class="artTitle">
? ? ? ? ? ? ? ? Slack：團隊日常溝通協(xié)作工具典范
? ? ? ? ? ? </p>
? ? ? ? ? ? <p class="subTitle">
? ? ? ? ? ? ? ? 作者：來自網(wǎng)絡(luò) 發(fā)表時間：2014-3-1
? ? ? ? ? ? </p>
? ? ? ? ? ? <p>
? ? ? ? ? ? ? ? 現(xiàn)在可以在Slack.com上申請成為試用用戶，這是一個面對企業(yè)、團隊的協(xié)作工具，似乎需要試用企業(yè)域名后綴的郵箱。 Slack從目前看，基本符合我對團隊溝通工具的完全要求。特點如下：
? ? ? ? ? ? ? ? 在所有端都可以進行，即桌面端，包括Mac OS和Windows系統(tǒng)；web端即瀏覽器；移動端的支持包括iOS和Android。同時，移動端是有良好體驗以滿足移動辦公便利性的。
? ? ? ? ? ? ? ? 聚焦核心行為，即"發(fā)布一條信息"，團隊成員只需要做一個這個基本行為即可。發(fā)布一條... <a href="#" onclick="showdiv(this)">全文</a></p>? ? //點擊全文實現(xiàn)展開
? ? ? ? ? ? <div class="content">
? ? ? ? ? ? ? ? <p>
? ? ? ? ? ? ? ? ? ? 現(xiàn)在可以在Slack.com上申請成為試用用戶，這是一個面對企業(yè)、團隊的協(xié)作工具，似乎需要試用企業(yè)域名后綴的郵箱。 Slack從目前看，基本符合我對團隊溝通工具的完全要求。特點如下：</p>
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? <p>
? ? ? ? ? ? ? ? ? ? 聚焦核心行為，即“發(fā)布一條信息”，團隊成員只需要做一個這個基本行為即可。</p>
? ? ? ? ? ? ? ? <p>
? ? ? ? ? ? ? ? ? ? 發(fā)布一條信息這個行為可以擴展成為該信息是一個圖片或者一個文件等，以便協(xié)作更好進行，如果文件能快速預覽則更好。</p>
? ? ? ? ? ? ? ? <p>
? ? ? ? ? ? ? ? ? ? 支持@方式直接和單個團隊成員溝通，并且能夠被其他成員看到和參與進來。</p>
? ? ? ? ? ? ? ? <p>
? ? ? ? ? ? ? ? ? ? 以#來進行快速形成話題組或者項目組。</p>
? ? ? ? ? ? ? ? <p>
? ? ? ? ? ? ? ? ? ? 良好的搜索支持。上述雖然是Slack的特性，也是我對團隊日常協(xié)作工具的要求——顯然，Slack完全符合這些要求，而且產(chǎn)品做得很易用。這些要求其實就是我對“移動、社交、云端存儲”的理解，這三個因素基本會重寫很多軟件和應用。</p>
? ? ? ? ? ? ? ? <p>
? ? ? ? ? ? ? ? ? ? Slack有免費的lite版本，但收費版本似乎價格對中文用戶而言略高。</p>
? ? ? ? ? ? ? ? <p>
? ? ? ? ? ? ? ? ? ? Slack由我很喜歡的項目Flickr的創(chuàng)始人新公司TinySpeck創(chuàng)辦，因此基礎(chǔ)甚好。而且從目前看，基本上會成為一個很成功的應用，所以在產(chǎn)品持續(xù)發(fā)展上面應該毫無問題。</p>
? ? ? ? ? ? ? ? <p>
? ? ? ? ? ? ? ? ? ? The post Slack：團隊日常溝通協(xié)作工具典范 appeared first on 游山打獵.</p>
? ? ? ? ? ? ? ? <div class="btm">
? ? ? ? ? ? ? ? ? ? <a href="#" class="btn" onclick="hidediv(this)">收起全文</a>? ? //點擊收起全文實現(xiàn)收起
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? ? ? <hr />
? ? ? ? <div id="art1">
? ? ? ? ? ? <p class="artTitle">
? ? ? ? ? ? ? ? Slack：團隊日常溝通協(xié)作工具典范
? ? ? ? ? ? </p>
? ? ? ? ? ? <p class="subTitle">
? ? ? ? ? ? ? ? 作者：來自網(wǎng)絡(luò) 發(fā)表時間：2014-3-1
? ? ? ? ? ? </p>
? ? ? ? ? ? <p>
? ? ? ? ? ? ? ? 現(xiàn)在可以在Slack.com上申請成為試用用戶，這是一個面對企業(yè)、團隊的協(xié)作工具，似乎需要試用企業(yè)域名后綴的郵箱。 Slack從目前看，基本符合我對團隊溝通工具的完全要求。特點如下：
? ? ? ? ? ? ? ? 在所有端都可以進行，即桌面端，包括Mac OS和Windows系統(tǒng)；web端即瀏覽器；移動端的支持包括iOS和Android。同時，移動端是有良好體驗以滿足移動辦公便利性的。
? ? ? ? ? ? ? ? 聚焦核心行為，即"發(fā)布一條信息"，團隊成員只需要做一個這個基本行為即可。發(fā)布一條... <a href="#"? onclick="showdiv(this)">全文</a></p>? ? ? //點擊全文實現(xiàn)展開
? ? ? ? ? ? <div class="content">
? ? ? ? ? ? ? ? <p>
? ? ? ? ? ? ? ? ? ? 現(xiàn)在可以在Slack.com上申請成為試用用戶，這是一個面對企業(yè)、團隊的協(xié)作工具，似乎需要試用企業(yè)域名后綴的郵箱。 Slack從目前看，基本符合我對團隊溝通工具的完全要求。特點如下：</p>
? ? ? ? ? ? ? ? <p>
? ? ? ? ? ? ? ? ? ? 在所有端都可以進行，即桌面端，包括Mac OS和Windows系統(tǒng)；web端即瀏覽器；移動端的支持包括iOS和Android。</p>
? ? ? ? ? ? ? ? <p>
? ? ? ? ? ? ? ? ? ? 同時，移動端是有良好體驗以滿足移動辦公便利性的。</p>
? ? ? ? ? ? ? ? <p>
? ? ? ? ? ? ? ? ? ? 聚焦核心行為，即“發(fā)布一條信息”，團隊成員只需要做一個這個基本行為即可。</p>
? ? ? ? ? ? ? ? <p>
? ? ? ? ? ? ? ? ? ? 發(fā)布一條信息這個行為可以擴展成為該信息是一個圖片或者一個文件等，以便協(xié)作更好進行，如果文件能快速預覽則更好。</p>
? ? ? ? ? ? ? ? <p>
? ? ? ? ? ? ? ? ? ? 支持@方式直接和單個團隊成員溝通，并且能夠被其他成員看到和參與進來。</p>
? ? ? ? ? ? ??
? ? ? ? ? ? ? ? <p>
? ? ? ? ? ? ? ? ? ? The post Slack：團隊日常溝通協(xié)作工具典范 appeared first on 游山打獵.</p>
? ? ? ? ? ? ? ? <div class="btm">
? ? ? ? ? ? ? ? ? ? <a href="#" class="btn" onclick="hidediv(this)">收起全文</a>? ? ?//點擊收起全文實現(xiàn)收起
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? ??
? ? ? ? ?
? ? </div>
</body>
</html>

查看全部

0 采集收起來源：編程練習
2018-08-06
哈爾波兒

定時展開收起
<!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: 0 auto;
? ? ? ? ? ? padding: 0;
? ? ? ? }
? ? ? ? a:focus
? ? ? ? {
? ? ? ? ? ? outline: none;
? ? ? ? }
? ? ? ??
? ? ? ? #pn
? ? ? ? {
? ? ? ? ? ? background: #e8e8e8;
? ? ? ? ? ? height: 120px;
? ? ? ? ? ? width: auto;
? ? ? ? ? ? display: block;
? ? ? ? ? ? margin: 0 auto;
? ? ? ? ? ? padding: 5px;
? ? ? ? ? ? text-align: center;
? ? ? ? overflow:hidden;
? ? ? ? }
? ? ? ? .slide
? ? ? ? {
? ? ? ? ? ? padding: 10px;
? ? ? ? ? ? width: 960px;
? ? ? ? ? ? margin: 0 auto;
? ? ? ? ? ? background: gray;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? height: 40px;
? ? ? ? ? ? line-height: 40px;
? ? ? ? ? ? color: #fff;
? ? ? ? }
? ? </style>
? ? <script type="text/javascript">
? ? ?//增加高度函數(shù)addH()
? ? ? ? var h = 0;?
? ? ? ? function addh() {??
? ? ? ? ? ?if(h < 120){
? ? ? ? ? ? ? ?h+=2;
? ? ? ? ? ? ? ?document.getElementById('pn').style.height = h +'px';
? ? ? ? ? ?}else{
? ? ? ? ? ? ? ?return;
? ? ? ? ? ?}
setTimeout('addh()',30);
? ? ? ? }
? ? ? ??
? ? ? ?//網(wǎng)頁加載完畢時，調(diào)用增加高度函數(shù)addH()，等待5秒鐘后調(diào)用減少高度函數(shù)subh()。?
? ? ? ? window.onload = function(){
? ? ? ? ? ? addh();
? ? ? ? ? ? setTimeout('subh()',5000);
? ? ? ? }
? ? ? // 減少高度函數(shù)subH()
? ? ? ? function subh() {
? ? ? ? ? ? if(h > 0){
? ? ? ? ? ? ? ?h-=2;
? ? ? ? ? ? ? ?document.getElementById('pn').style.height = h +'px';
? ? ? ? ? ?}else{
? ? ? ? ? ? ? ?return;
? ? ? ? ? ? ? ?document.getElementById('pn').style.display = 'none';
? ? ? ? ? ? ? ?document.getElementById('pn').style.height = 0;
? ? ? ? ? ?}
? ? setTimeout('subh()',30);? ? ? ??
? ? ? ? }?
? ? </script>
</head>
<body>
? ? <div id="pn">
? ? ? ? <h1>
? ? ? ? ? ? 歡迎來到慕課網(wǎng)</h1>
? ? ? ? <h2>
? ? ? ? ? ? 大幅廣告</h2>
? ? </div>
? ? <p class="slide">
? ? ? ? 慕課網(wǎng)歡迎你</p>
</body>
</html>

查看全部

0 采集收起來源：編程練習
2018-08-06
哈爾波兒

點擊展開，收起
<!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>
? ? <script type="text/javascript">
? ? ? ? function showdiv() {//展開函數(shù)
? ? ? ? ? ? document.getElementById("hpn").style.display="block";
? ? ? ? ? ? document.getElementById("strHref").innerHTML="收起";
? ? ? ? ? ? document.getElementById("strHref").href="javascript:hidediv()";
? ? ? ? }
? ? ? ? function hidediv() {//收起函數(shù)
? ? ? ? ? ?document.getElementById("hpn").style.display="none";
? ? ? ? ? ? document.getElementById("strHref").innerHTML="展開";
? ? ? ? ? ? document.getElementById("strHref").href="javascript:showdiv()";
? ? ? ? ? ?
? ? ? ? ? ?
? ? ? ? ? ?
? ? ? ? }
? ? </script>
</head>
<body>
? ? <div id="pn">
? ? ? ? <p>
? ? ? ? ? ? 手機 - 商品篩選</p>
? ? ? ? <p>
? ? ? ? ? ? 網(wǎng)絡(luò)：移動4G 聯(lián)通3G 電信3G</p>
? ? ? ? <div id="hpn">
? ? ? ? ? ? <p>
? ? ? ? ? ? ? ? 價格：5000元以上 4000-4999 3000元以下</p>
? ? ? ? ? ? <p>
? ? ? ? ? ? ? ? 特點：0元購機防水長待機</p>
? ? ? ? </div>
? ? </div>
? ? <p class="slide">
? ? ? ? <a href="javascript:showdiv()" id="strHref" class="btn-slide">展開</a>? ? 
? ? </p>
</body>
</html>

查看全部

0 采集收起來源：編程練習
2018-08-06
哈爾波兒 03:20

兩者的關(guān)系式

查看全部

0 采集收起來源：使用JavaScript實現(xiàn)收起效果
2018-07-30
哈爾波兒 01:08

考慮兼容性

查看全部

0 采集收起來源：瀏覽器兼容性
2018-07-30
慕粉9644264 04:50

html結(jié)構(gòu)

查看全部

0 采集收起來源：使用HTML/CSS實現(xiàn)靜態(tài)布局
2018-07-13
慕容初晨

展開與收起主要學了： document,getElementById()查找元素 onload()事件 setTimeout（code, millisec）事件 jQuery：toggle()：但是在1.9以上的包含1.9的jquery版本已經(jīng)移除了 parentNode、nextSibling、previousSibling屬性

查看全部

0 采集收起來源：回顧總結(jié)
2018-01-15
慕容初晨

瀏覽器上'報錯：Uncaught TypeError: Cannot set property 'display' of undefined的注意了nextSibling,previousSibling會將空格或者換行當做節(jié)點處理，p標簽后有換行，所以你需要使用兩次，如var y=x.nextSibling.nextSibling; 或者換成nextElementSibling和previousElementSibling，同時注意這兩個IE8及以下不兼容

查看全部

0 采集收起來源：瀏覽器兼容性
2018-01-15
慕瓜5189485

var $ = function(val) { if(val.indexOf("#") + 1) { return document.getElementById(val.substr(1)); } else { return document.getElementsByTagName(val); } } var w = 0; //增加廣告寬度函數(shù) function addW() { if(w < 100) { $("#adv").style.display = "block"; w += 5; $("#adv").style.width = w + "%"; if(w > 40) { $("#txt").style.display = "block"; $("#txt").style.opacity = w / 100; }; setTimeout(addW, 100); } else { return; } } //在網(wǎng)頁加載完畢時，調(diào)用增加寬度函數(shù)，等待5秒鐘后調(diào)用減少寬度函數(shù)。 window.onload = function() { addW(); setTimeout(subW, 5000); } //減少廣告寬度函數(shù) function subW() { if(w > 0) { w -= 5; $("#adv").style.width = w + "%"; $("#txt").style.opacity = w / 100; if(w < 50) { $("#txt").style.display = "none"; }; setTimeout(subW, 100); } else { $("#adv").style.display = "none"; return; } }

查看全部

0 采集收起來源：編程挑戰(zhàn)
2018-03-22
慕瓜5189485

function showdiv(obj) { //obj.parentNode.nextSibling.nextSibling.style.display = "block"; var x = obj.parentNode.nextSibling; //包含眾多空格作為文本節(jié)點，因此在我們使用nextSibling和previousSibling時就會出現(xiàn)問題。 //因為FireFox會把文本節(jié)點誤當做元素節(jié)點的兄弟節(jié)點來處理。我們可以添加nodeType來判斷。 //當上一節(jié)點或者是下一節(jié)點為文本節(jié)點時，就繼續(xù)尋找，直到找到下一個元素節(jié)點。 // 其中nodeType的值主要有以下幾種： // 元素節(jié)點的nodeType值為1 // 屬性節(jié)點的nodeType值為2 // 文本節(jié)點的nodeType值為3 while(x.nodeType != 1) { x = x.nextSibling; } x.style.display = "block"; obj.parentNode.style.display = "none"; } function hidediv(obj) { obj.parentNode.parentNode.style.display = "none"; var x = obj.parentNode.parentNode.previousSibling; while(x.nodeType != 1) { x = x.previousSibling; } x.style.display = "block"; }

查看全部

0 采集收起來源：瀏覽器兼容性
2018-03-22
慕瓜5189485 03:07

nextSibling 返回某個元素之后緊跟的元素(同一層級) previousSibling 返回某節(jié)點之前緊跟的節(jié)點(同一層級)

查看全部

0 采集收起來源：使用JavaScript實現(xiàn)展開效果
2017-11-11
慕瓜5189485

1.9版本之后toggle()就廢除了 $(document).ready(function() { $("#hrefStr").click(function(){ if($("#hpn").is(":visible")){ $("#hpn").hide(1000,function(){ $("#hrefStr").text("更多選項+");}); } else{ $("#hpn").show(800,function(){ $("#hrefStr").text("收起-");}); } }); });

查看全部

0 采集收起來源：jQuery實現(xiàn)點擊按鈕展開和收起動畫效果
2018-03-22
riyyao 06:07

function showdiv(obj){ var x=obj.parentNode; //摘要 var y=x.nextSibling; //正文 x.style.display="none"; y.style.display="block"; //點擊showdiv，顯示正文內(nèi)容 }

查看全部

0 采集收起來源：使用JavaScript實現(xiàn)展開效果
2018-03-22
riyyao 04:55

nextSibling 返回某個元素之后緊跟的元素 previousSibling 返回某節(jié)點之前緊跟的節(jié)點

查看全部

0 采集收起來源：使用JavaScript實現(xiàn)展開效果
2017-07-23
riyyao 04:41

function showdiv() { document.getElementById("hpn").style.display = "block"; //設(shè)置id為strHref元素，鏈接為隱藏 document.getElementById("strHref").href = "javascript:hidediv();"; document.getElementById("strHref").innerHTML = "收起-"; } function hidediv() { document.getElementById("hpn").style.display = "none"; // document.getElementById("pn").style.height='60px'; document.getElementById("strHref").href = "javascript:showdiv();"; document.getElementById("strHref").innerHTML = "更多選項+"; }

查看全部

0 采集收起來源：使用JavaScript實現(xiàn)動態(tài)效果
2018-03-22
qq_絕影_1

<a href="javascript:showdiv()" id="strHref" class="btn-slide">展開</a>

查看全部

0 采集收起來源：編程練習
2018-03-22
WEB丶FriEnD

+ -

查看全部

0 采集收起來源：編程挑戰(zhàn)
2017-05-23
WEB丶FriEnD

Removed 1.9 1.9版本 .toggle(function, function, … ) 方法刪除

查看全部

0 采集收起來源：編程練習
2017-05-22