JS實(shí)戰(zhàn)篇之收縮菜單表單布局
更新時(shí)間：2016年12月10日 08:49:10 作者：AllSight
這篇文章主要介紹了JS實(shí)戰(zhàn)篇之收縮菜單表單布局的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
獲取節(jié)點(diǎn)的兩種方式：
1、通過(guò)event對(duì)象的srcElement屬性；
2、通過(guò)事件源對(duì)象用this傳入。
代碼如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>收縮菜單 · 表單布局</title>
<script type="text/javascript">
function list(dtNode){
// var dtNode = event.srcElement;
var dlNode = dtNode.parentNode;
// alert(dtNode.nodeName+"---"+dlNode.nodeName);
var dlNodes = document.getElementsByTagName("dl");
// alert(dlNodes.length);
for(var i=0; i<dlNodes.length; i++){
if(dlNodes[i] == dlNode){
/*判斷當(dāng)前標(biāo)題是展開還是關(guān)閉狀態(tài)，默認(rèn)關(guān)閉，先執(zhí)行else語(yǔ)句*/
if(dlNode.className == "open"){
dlNode.className = "close";
}
else{
dlNode.className = "open";
}
}
else{
dlNodes[i].className = "close";
}
}
}
</script>
<style type="text/css">
dl{
overflow: hidden;
height: 18px;
}
.open{
overflow: visible;
}
.close{
overflow: hidden;
}
</style>
</head>
<!-- 獲取節(jié)點(diǎn)的兩種方式：
1、通過(guò)event對(duì)象的srcElement屬性；
2、通過(guò)事件源對(duì)象用this傳入
-->
<body>
<!-- 事件源是dt，但是操作的是dl -->
<dl>
<dt onclick="list(this)">今天天氣好晴朗</dt>
<dd>今天天氣好晴朗</dd>
<dd>今天天氣好晴朗</dd>
<dd>今天天氣好晴朗</dd>
<dd>今天天氣好晴朗</dd>
<dd>今天天氣好晴朗</dd>
</dl>
<dl>
<dt onclick="list(this)">今天天氣好晴朗</dt>
<dd>今天天氣好晴朗</dd>
<dd>今天天氣好晴朗</dd>
<dd>今天天氣好晴朗</dd>
<dd>今天天氣好晴朗</dd>
<dd>今天天氣好晴朗</dd>
</dl>
<dl>
<dt onclick="list(this)">今天天氣好晴朗</dt>
<dd>今天天氣好晴朗</dd>
<dd>今天天氣好晴朗</dd>
<dd>今天天氣好晴朗</dd>
<dd>今天天氣好晴朗</dd>
<dd>今天天氣好晴朗</dd>
</dl>
<dl>
<dt onclick="list(this)">今天天氣好晴朗</dt>
<dd>今天天氣好晴朗</dd>
<dd>今天天氣好晴朗</dd>
<dd>今天天氣好晴朗</dd>
<dd>今天天氣好晴朗</dd>
<dd>今天天氣好晴朗</dd>
</dl>
<dl>
<dt onclick="list(this)">今天天氣好晴朗</dt>
<dd>今天天氣好晴朗</dd>
<dd>今天天氣好晴朗</dd>
<dd>今天天氣好晴朗</dd>
<dd>今天天氣好晴朗</dd>
<dd>今天天氣好晴朗</dd>
</dl>
<dl>
<dt onclick="list(this)">今天天氣好晴朗</dt>
<dd>今天天氣好晴朗</dd>
<dd>今天天氣好晴朗</dd>
<dd>今天天氣好晴朗</dd>
<dd>今天天氣好晴朗</dd>
<dd>今天天氣好晴朗</dd>
</dl>
<dl>
<dt onclick="list(this)">今天天氣好晴朗</dt>
<dd>今天天氣好晴朗</dd>
<dd>今天天氣好晴朗</dd>
<dd>今天天氣好晴朗</dd>
<dd>今天天氣好晴朗</dd>
<dd>今天天氣好晴朗</dd>
</dl>
</body>
</html>
相關(guān)文章
這篇文章主要介紹了使用js 判斷瀏覽器使用的語(yǔ)言,需要的朋友可以參考下2014-03-03
Swiper實(shí)現(xiàn)導(dǎo)航欄滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了Swiper實(shí)現(xiàn)導(dǎo)航欄滾動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要介紹了JS閉包原理與應(yīng)用,結(jié)合實(shí)例形式較為詳細(xì)的分析了javascript閉包的原理、應(yīng)用及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2018-12-12
js 索引下標(biāo)之li集合綁定點(diǎn)擊事件
本文通過(guò)一段實(shí)例代碼給大家講解了js索引下標(biāo)之li集合綁定點(diǎn)擊事件的相關(guān)知識(shí)，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-01-01
微信小程序 this.triggerEvent()的具體使用
這篇文章主要介紹了微信小程序 this.triggerEvent()的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
這篇文章主要給大家介紹了關(guān)JS 箭頭函數(shù)的this指向，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-11-11
Webpack中SplitChunksPlugin 配置參數(shù)詳解
這篇文章主要介紹了Webpack中SplitChunksPlugin 配置參數(shù)詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
JS實(shí)現(xiàn)控制表格內(nèi)指定單元格內(nèi)容對(duì)齊的方法
這篇文章主要介紹了JS實(shí)現(xiàn)控制表格內(nèi)指定單元格內(nèi)容對(duì)齊的方法,涉及javascript操作表格單元格內(nèi)容樣式的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
今天小編就為大家分享一篇快速解決layui彈窗按enter鍵不停彈窗的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
JS彈出對(duì)話框?qū)崿F(xiàn)方法(三種方式)
這篇文章主要介紹了JS彈出對(duì)話框?qū)崿F(xiàn)方法,結(jié)合實(shí)例形式分析了三種方式,包括alert、confirm及prompt,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-12-12