頁(yè)編程之折疊標(biāo)簽。

HTML<details>標(biāo)簽，同學(xué)們好，這里是免費(fèi)少兒編程知識(shí)分享，每天一行代碼誰(shuí)都能學(xué)會(huì)！今天分享的知識(shí)是創(chuàng)建一個(gè)可以折疊的元素，也就是說(shuō)可以通過(guò)點(diǎn)擊來(lái)切換顯示和隱藏，通常用于詞語(yǔ)解釋或者對(duì)某些內(nèi)容進(jìn)行注解。

折疊的好處是在最開(kāi)始的時(shí)候可以不用去占用網(wǎng)頁(yè)上的空間，不用的時(shí)候也可以像這樣收起來(lái)，不影響其他內(nèi)容的顯示。用到了HTML5新增的details標(biāo)簽和summary標(biāo)簽。

先來(lái)看看今天實(shí)例的運(yùn)行效果，網(wǎng)頁(yè)上有一個(gè)大大的H1標(biāo)簽，這只是為了排版效果，下方才是重點(diǎn)。可以看到有簡(jiǎn)介，瀏覽器支持說(shuō)明123，這些文字的前方無(wú)一例外的都有一個(gè)三角箭頭，點(diǎn)擊之后就可以展開(kāi)和收起相應(yīng)的內(nèi)容。展開(kāi)之后箭頭會(huì)變成向下的狀態(tài)，收起之后就會(huì)指向右方，隨便點(diǎn)擊看一看都是這樣的沒(méi)有問(wèn)題。

效果各位同學(xué)都已經(jīng)看到了，來(lái)看看實(shí)現(xiàn)的代碼吧。首先要說(shuō)明一下，details 和 summary 標(biāo)簽是必須要一起出現(xiàn)的，單獨(dú)出現(xiàn)是沒(méi)有任何效果的。summary 標(biāo)簽必須是在details標(biāo)簽內(nèi)部，F(xiàn)Pail向?yàn)g覽器聲明了將在此插入一個(gè)可以折疊的元素。

而 TRair標(biāo)簽告訴了瀏覽器，這個(gè)折疊元素的標(biāo)題是什么，也就是剛才點(diǎn)擊的內(nèi)容部分是什么。在details標(biāo)簽中，但是沒(méi)有在summary標(biāo)簽中的內(nèi)容，就是可以被折疊的內(nèi)容本身。每一個(gè) details 標(biāo)簽和 fully 標(biāo)簽必須一一對(duì)應(yīng)。

說(shuō)人話就是一個(gè)details標(biāo)簽，里面只能出現(xiàn)一個(gè) iTunes，samml，samml，samml，這個(gè)屁標(biāo)簽是可有可無(wú)的。如果說(shuō)沒(méi)有，它內(nèi)容就會(huì)和標(biāo)題貼在一起。

為了美觀還是加上一個(gè)比較好

而有了這個(gè)標(biāo)簽之后也確實(shí)能減少很多重復(fù)的工作。

目前國(guó)內(nèi)大多數(shù)瀏覽器都支持極速模式，即采用Stot內(nèi)核，因此一般情況下它都能正常顯示。具體情況還需視個(gè)人情況而定。

今天的分享就到這里，希望各位同學(xué)能夠認(rèn)真練習(xí)三遍，即使不看視頻也能獨(dú)立完成。所有案例和相關(guān)文檔都可向我索取。下期再見(jiàn)，想學(xué)習(xí)編程，記得關(guān)注哦。

次我們來(lái)講解一個(gè)在動(dòng)態(tài)面板里面切換標(biāo)簽的效果。

一、準(zhǔn)備元件

1.首先打開(kāi)一下Axure新建文件，拖取一個(gè)矩形，設(shè)置長(zhǎng)度：375 px ，高度：50 px ；

2.然后輸入文本標(biāo)簽，這里的字體大小我們給它設(shè)置為14 px ，先把它置灰，這里我的字體色值為 #999999 ；

3.最后我們加一個(gè)小黑條，脫出一個(gè)矩形，設(shè)置長(zhǎng)度：40 px ，高度：2 px 。給它名為小黑條。

以上樣式我是按照常規(guī)移動(dòng)端尺寸做的，不用說(shuō)每個(gè)尺寸都跟我一樣，只要保存美觀即可。

好的，完成之前我們會(huì)得到以下的樣子：

二、設(shè)置文本的交互樣式

1.我們點(diǎn)擊全選所有文本 – 右鍵選擇交互樣式 – 選擇選中一項(xiàng) – 把字體顏色設(shè)置為 #333333，然后點(diǎn)擊確定；

2.第二步還是選擇所有文本 – 右鍵選擇設(shè)置選項(xiàng)組名稱 – 命名“標(biāo)簽切換”（這里可隨意命名）；

3.因?yàn)樾『跅l在標(biāo)題一的底部，我們需要單選標(biāo)題一 – 設(shè)置為默認(rèn)選中狀態(tài)；

這時(shí)候我們的前提條件就做好了，可以準(zhǔn)備下一步了。

三、設(shè)置交互效果

1.點(diǎn)擊交互效果 “鼠標(biāo)點(diǎn)擊時(shí)” ，設(shè)置該元件為 “true” （選中） ；

2.點(diǎn)擊移動(dòng)，選擇小黑條，設(shè)置移動(dòng)為絕對(duì)位置，X軸為 [[This+2]] , Y 軸為 [[This+28]] ，動(dòng)畫為線性，時(shí)間為250毫秒，點(diǎn)擊確定;

3.復(fù)制標(biāo)題一的動(dòng)態(tài)效果，粘貼到所有文本，這時(shí)切換標(biāo)簽的效果就完成了。

已完成的小伙伴，可以點(diǎn)擊預(yù)覽嘗試一下自己做的效果，感受一下自己做出來(lái)的成果！

四、進(jìn)階

已完成以上步驟的小伙伴們，可以嘗試一下進(jìn)階效果。咱們的標(biāo)題是《動(dòng)態(tài)面板：切換標(biāo)簽》，咱們是不是還沒(méi)有用到動(dòng)態(tài)面板呢？

下面來(lái)嘗試著做吧！

1.我們把文本再新增出 n 個(gè)（記得不要復(fù)制第一個(gè)默認(rèn)為選中狀態(tài)的標(biāo)題一），讓他超出 375 px 的長(zhǎng)度，同時(shí)矩形需要跟上；

2.然后我們?nèi)x所有元件，右鍵點(diǎn)擊“轉(zhuǎn)換為動(dòng)態(tài)面板”，然后我們給這個(gè)動(dòng)態(tài)面板命名為“移動(dòng)面板”；

3.然后我們?cè)僭谶@個(gè)基礎(chǔ)上給它再加一個(gè)動(dòng)態(tài)面板，命名為“固定面板”，給他設(shè)置一個(gè)固定寬度為 375 px ，然后可以看到以下樣式；

4.這時(shí)候我們打開(kāi)固定面板，按照 375 px 的寬度定一個(gè)中心點(diǎn)，拉一個(gè)標(biāo)尺;

5.以下的意思是點(diǎn)擊標(biāo)題一、二、三，新增一個(gè)條件為：移動(dòng)“移動(dòng)面板”至 X 軸為 0 ，Y 軸為 0 ；但到標(biāo)題四時(shí)， X 軸需要到中心點(diǎn)的地方，X 軸會(huì)變成 -42 ，Y 軸保持不變。以此類推…（看以下第一張圖）下一個(gè)是 -105 px 、 -168 px 、 -212 px 、 -212 px 、 -212 px （后面三個(gè)都為 -212 px 的原因是： “移動(dòng)面板” 的移動(dòng)不能少于固定面板右側(cè)的藍(lán)色線，看以下第二張圖）;

6.看一下設(shè)置移動(dòng)“移動(dòng)面板”的設(shè)置樣式（效果做在文本里）；

7.按照上面 “5” 的規(guī)則，把其他文本都加上移動(dòng)“移動(dòng)面板”的效果;

8.所有步驟完成了之后，可得到該效果（騰訊視頻鏈接）：

https://v.qq.com/x/page/c1342lfqgss.html?start=1

本文由 @李桂東 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自網(wǎng)絡(luò)

果對(duì)您有幫助，可以點(diǎn)贊收藏一下，以備后續(xù)使用，節(jié)約資料查找時(shí)間

var HtmlUtil={

/*1.用瀏覽器內(nèi)部轉(zhuǎn)換器實(shí)現(xiàn)html轉(zhuǎn)碼*/

htmlEncode: function (html) {

//1.首先動(dòng)態(tài)創(chuàng)建一個(gè)容器標(biāo)簽元素，如DIV

var temp=document.createElement("div");

//2.然后將要轉(zhuǎn)換的字符串設(shè)置為這個(gè)元素的innerText(ie支持)或者textContent(舊版火狐，google支持)

(temp.textContent !=undefined) ? (temp.textContent=html) : (temp.innerText=html);

//3.最后返回這個(gè)元素的innerHTML，即得到經(jīng)過(guò)HTML編碼轉(zhuǎn)換的字符串了

var output=temp.innerHTML;

temp=null;

return output;

},

/*2.用瀏覽器內(nèi)部轉(zhuǎn)換器實(shí)現(xiàn)html解碼*/

htmlDecode: function (text) {

//1.首先動(dòng)態(tài)創(chuàng)建一個(gè)容器標(biāo)簽元素，如DIV

var temp=document.createElement("div");

//2.然后將要轉(zhuǎn)換的字符串設(shè)置為這個(gè)元素的innerHTML(ie，火狐，google都支持)

temp.innerHTML=text;

//3.最后返回這個(gè)元素的innerText(ie支持)或者textContent(火狐，google支持)，即得到經(jīng)過(guò)HTML解碼的字符串了。

var output=temp.innerText || temp.textContent;

temp=null;

return output;

},

/*3.用正則表達(dá)式實(shí)現(xiàn)html轉(zhuǎn)碼*/

htmlEncodeByRegExp: function (str) {

var s="";

if (str.length==0) return "";

s=str.replace(/&/g, "&");

s=s.replace(/</g, "<");

s=s.replace(/>/g, ">");

s=s.replace(/\s/g, " ");

s=s.replace(/\'/g, "'");

s=s.replace(/\"/g, """);

s=s.replace(/"/g, '"');

return s;

},

/*4.用正則表達(dá)式實(shí)現(xiàn)html解碼*/

htmlDecodeByRegExp: function (str) {

var s="";

if (str.length==0) return "";

s=str.replace(/&/g, "&");

s=s.replace(/</g, "<");

s=s.replace(/>/g, ">");

s=s.replace(/ /g, " ");

s=s.replace(/'/g, "\'");

s=s.replace(/"/g, "\"");

return s;

}

};

// 使用舉例

// 用瀏覽器內(nèi)部轉(zhuǎn)換器實(shí)現(xiàn)html轉(zhuǎn)碼

var html=" <div>'我們?cè)谀睦?#39;</div> "

var enCodehtml=HtmlUtil.htmlEncode(html);

//console.log(enCodehtml); // <div>'我們?cè)谀睦?#39;</div>

// 用瀏覽器內(nèi)部轉(zhuǎn)換器實(shí)現(xiàn)html解碼

var decodeHtml=HtmlUtil.htmlDecode(enCodehtml);

//console.log(decodeHtml); // <div>'我們?cè)谀睦?#39;</div>

// ————————————————————————————————————————————————————————————————

// 用正則表達(dá)式實(shí)現(xiàn)html轉(zhuǎn)碼

var html2="<div> winne'hello'</div>";

var RegExpEnCodehtml=HtmlUtil.htmlEncodeByRegExp(html2)

//console.log(RegExpEnCodehtml); // <div> winne'hello'</div>

// 用正則表達(dá)式實(shí)現(xiàn)html解碼

var RegExpDecodeHtml=HtmlUtil.htmlDecodeByRegExp(RegExpEnCodehtml);

//console.log(RegExpDecodeHtml); // <div> winne'hello'</div>