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