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)題是展開(kāi)還是關(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)文章
uni-app小程序中父組件和子組件傳值的實(shí)現(xiàn)實(shí)例
uniapp父子組件引用傳值,和vue的一樣,沒(méi)有小程序那樣的麻煩,下面這篇文章主要給大家介紹了關(guān)于uni-app小程序中父組件和子組件傳值的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
風(fēng)吟的小型JavaScirpt庫(kù) (FY.JS).
此庫(kù)非常的迷你壓縮之后只有1.54KB.但是卻有類(lèi)似jquery的語(yǔ)法有COOKIE操作還有DOM以及AJAX跟綁定事件函數(shù).2010-03-03
這篇文章主要介紹了document.addEventListener，下面有個(gè)示例，大家可以參考下2014-03-03
這篇文章主要介紹了Promise掃盲貼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
使用js操作css實(shí)現(xiàn)js改變背景圖片示例
有個(gè)朋友在weibo上問(wèn)我可不可以用JS和CSS讓頁(yè)面每次刷新隨機(jī)產(chǎn)生一張背景圖，當(dāng)然是可以的。具體的方法看下面的實(shí)現(xiàn)代碼吧2014-03-03
JavaScript Array.flat()函數(shù)用法解析
這篇文章主要介紹了JavaScript Array.flat()函數(shù)用法解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
OpenLayers3實(shí)現(xiàn)鼠標(biāo)移動(dòng)顯示坐標(biāo)
這篇文章主要為大家詳細(xì)介紹了OpenLayers3實(shí)現(xiàn)鼠標(biāo)移動(dòng)顯示坐標(biāo)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
理解javascript中的回調(diào)函數(shù)(callback)
這篇文章主要介紹了理解javascript中的回調(diào)函數(shù)(callback),本文著重于對(duì)回調(diào)函數(shù)概念的理解,需要的朋友可以參考下2014-09-09
使用coffeescript編寫(xiě)node.js項(xiàng)目的方法匯總
Node.js 基于JavaScript編寫(xiě)應(yīng)用，JavaScript是我的主要開(kāi)發(fā)語(yǔ)言。CoffeeScript是編譯為JavaScript的編程語(yǔ)言。CoffeeScript是一個(gè)非常高階的語(yǔ)言，將JavaScript、Ruby和Python中我最?lèi)?ài)的部分結(jié)合在了一起。小編給大家介紹下使用coffeescript編寫(xiě)node.js項(xiàng)目的方法2015-08-08
js實(shí)現(xiàn)在文本框光標(biāo)處添加字符的方法介紹
在開(kāi)發(fā)應(yīng)用中，經(jīng)常會(huì)遇到一些技術(shù)上的問(wèn)題，比如：怎樣讓js在文本框光標(biāo)處添加字符，本文將以此問(wèn)題進(jìn)行詳細(xì)介紹，需要了解的朋友可以參考下2012-11-11