JS實戰(zhàn)篇之收縮菜單表單布局
更新時間：2016年12月10日 08:49:10 作者：AllSight
這篇文章主要介紹了JS實戰(zhàn)篇之收縮菜單表單布局的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
獲取節(jié)點的兩種方式：
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){
/*判斷當前標題是展開還是關閉狀態(tài)，默認關閉，先執(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é)點的兩種方式：
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>
相關文章
這篇文章主要介紹了使用js 判斷瀏覽器使用的語言,需要的朋友可以參考下2014-03-03
這篇文章主要為大家詳細介紹了Swiper實現(xiàn)導航欄滾動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要介紹了JS閉包原理與應用,結合實例形式較為詳細的分析了javascript閉包的原理、應用及相關操作注意事項,需要的朋友可以參考下2018-12-12
本文通過一段實例代碼給大家講解了js索引下標之li集合綁定點擊事件的相關知識，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-01-01
微信小程序 this.triggerEvent()的具體使用
這篇文章主要介紹了微信小程序 this.triggerEvent()的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
這篇文章主要給大家介紹了關JS 箭頭函數(shù)的this指向，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-11-11
Webpack中SplitChunksPlugin 配置參數(shù)詳解
這篇文章主要介紹了Webpack中SplitChunksPlugin 配置參數(shù)詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
這篇文章主要介紹了JS實現(xiàn)控制表格內指定單元格內容對齊的方法,涉及javascript操作表格單元格內容樣式的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
今天小編就為大家分享一篇快速解決layui彈窗按enter鍵不停彈窗的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了JS彈出對話框實現(xiàn)方法,結合實例形式分析了三種方式,包括alert、confirm及prompt,非常簡單實用,需要的朋友可以參考下2015-12-12