###DOM版本的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .headcolor{ background-color: gray; height: 100px; } .bodycolor{ background-color: green; width: 50px; } .hide{ display: none; } .content1{ color: red; } </style> </head> <body style="margin: 0"> <div class="headcolor">111</div> <div> <div> <div id="i1" class="bodycolor" onclick="hide('i1')">菜单一</div> <div class="hide"> <div>内容1</div> <div>内容2</div> <div>内容3</div> </div> </div> <div> <div id="i2" class="bodycolor" onclick="hide('i2')">菜单二</div> <div class="hide"> <div>内容1</div> <div>内容2</div> <div>内容3</div> </div> </div> <div> <div id="i3" class="bodycolor" onclick="hide('i3')">菜单三</div> <div class="hide"> <div>内容1</div> <div>内容2</div> <div>内容3</div> </div> </div> </div> <script> function hide(nid) { var d = document.getElementById(nid); var item_list = d.parentElement.parentElement.children; console.log(d); for(var i=0;i<item_list.length;i++){ item_list[i].children[1].classList.add('hide'); } d.nextElementSibling.classList.remove("hide") } // function hide(nid) { // var d = document.getElementById(nid); // // console.log(d); // d.nextElementSibling.classList.remove('hide'); // } </script> </body> </html>
###jQuery版本的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .header{ background-color: green; } .content{ min-width: 50px; } .hide{ display: none; } </style> </head> <body> <div style="height: 400px; 200px;border: 1px solid #dddddd;"> <div class="item"> <div class="header">菜单一</div> <div class="content hide">内容一</div> </div> <div class="item"> <div class="header">菜单2</div> <div class="content hide">内容2</div> </div> <div class="item"> <div class="header">菜单3</div> <div class="content hide">内容3</div> </div> </div> <script src="jquery-3.2.1.js"></script> <script> $('.header').click(function () { var v = $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide'); }); </script> </body> </html>
removeClass('hide')； 移除hide样式
addClass('hide')； 添加hide样式
parent() 父标签
siblings() 兄弟标签
children() 儿子标签
next() 当前标签临近的下一个标签
prev() 当前标签临近的上一个标签
find('.content') 查找拥有.content样式的标签
###
头
菜单一
内容1
内容2
内容3
菜单二
内容1
内容2
内容3
菜单三
内容1
内容2
内容3