jQuery左侧菜单栏
2019-03-19 本文已影响0人
幽泉流霜
代码思想：
1、找到当前的标题栏div
2、去除兄弟标签的hide类
3、增加父类的兄弟的除了标题栏的孩子的 hide类
本质上就是两行代码
$(this).siblings().removeClass("hide");
$(this).parent().siblings().find('.contents').addClass("hide");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jq左侧菜单栏</title>
<style>
.header {
background-color: aquamarine;
color: white;
height: 35px;
line-height: 35px;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div id = "leftlan" style ="width:300px;">
<div>
<div class = "header">标题1</div>
<div class = "contents">内容1</div>
<div class = "contents">内容2</div>
<div class = "contents">内容3</div>
</div>
<div>
<div class = "header">标题2</div>
<div class = "contents">内容1</div>
<div class = "contents">内容2</div>
<div class = "contents">内容3</div>
</div>
<div>
<div class = "header">标题3</div>
<div class = "contents">内容1</div>
<div class = "contents">内容2</div>
<div class = "contents">内容3</div>
</div>
</div>
<script src = "jquery-1.12.4.js"></script>
<script>
$("#leftlan").find('.contents').addClass("hide");
$(".header").click(function(){
$(this).parent().siblings().find('.contents').addClass("hide");
$(this).siblings().removeClass("hide");
})
</script>
</body>
</html>
再附上一个JavaScript的左侧菜单写法
本质上以示一样的 不过JavaScript要用到循环语句
并且选择器麻烦很多
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.item .header{
background-color:aquamarine;
color:white;
height:35px;
line-height:35px;
}
.hide{
display: none;
}
.show{
display:block;
}
</style>
</head>
<body>
<div id = "all" style ="width:300px;">
<div class = "item">
<div id = "a1"class= "header" onclick ="menu_change('a1')">
菜单一
</div>
<div class = "contents">
<div class = "content">内容一</div>
<div class = "content">内容一</div>
<div class = "content">内容一</div></div>
</div>
<div class = "item">
<div id = "a2"class= "header" onclick ="menu_change('a2');">
菜单二
</div>
<div class = "contents">
<div class = "content">内容二</div>
<div class = "content">内容二</div>
<div class = "content">内容二</div></div>
</div>
<div class = "item">
<div id = "a3"class= "header" onclick ="menu_change('a3');">
菜单三
</div>
<div class = "contents">
<div class = "content">内容三</div>
<div class = "content">内容三</div>
<div class = "content">内容三</div>
</div>
</div>
<div class = "item">
<div id = "a4"class= "header" onclick ="menu_change('a4')">
菜单四
</div>
<div class = "contents">
<div class = "content">内容四</div>
<div class = "content">内容四</div>
<div class = "content">内容四</div>
</div>
</div>
</div>
<script>
// var mydivs = document.getElementsByClassName("h");
function menu_change(nid)
{
var currentheader = document.getElementById(nid);
var item_list = currentheader.parentElement.parentElement.children;
for( var i = 0;i<item_list.length;i++)
{
var current_item = item_list[i];
console.log(current_item);
current_item.children[1].classList.add("hide");
}
currentheader.nextElementSibling.classList.remove("hide");
}
</script>
</body>
</html>
