溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item .header{
height: 35px;
background-color: #2459a2;
color: white;
line-height: 35px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div>
<div class="item">
<div id="i1" class="header" onclick="ChangeMenu('i1')">菜單一</div>
<div class="content hide ">
<div>內容一</div>
<div>內容一</div>
<div>內容一</div>
</div>
</div>
<div class="item">
<div id="i2" class="header" onclick="ChangeMenu('i2')">菜單二</div>
<div class="content hide">
<div>內容二</div>
<div>內容二</div>
<div>內容二</div>
</div>
</div>
<div class="item">
<div id="i3" class="header" onclick="ChangeMenu('i3')">菜單三</div>
<div class="content hide ">
<div>內容三</div>
<div>內容三</div>
<div>內容三</div>
</div>
</div>
</div>
<script>
function ChangeMenu(nid) {
<!-- 獲取當前鼠標點擊的id -->
var current_header= document.getElementById(nid)
<!-- 從當前節點，獲取父節點信息，然后獲取該父節點獲取所有子節點，即div里的item標簽 -->
var item_list = current_header.parentElement.parentElement.children;
<!-- 循環所有節點，并把該節點下的第一個子節點添加hide屬性 -->
for(var i=0;i<item_list.length;i++){
var current_itme = item_list[i];
current_itme.children[1].classList.add('hide');
}
<!-- 將鼠標點擊的當前節點下的內容，刪除hide屬性 -->
current_header.nextElementSibling.classList.remove('hide')
}
</script>
</body>
</html>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
