jQurey實現隱藏菜單示例
阿新 • • 發佈：2018-06-06
python<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.header{
background-color: blue;
color: white;
}
.content{
min-height: 50px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div style="height: 400px;width: 80px;border: 1px solid red">
<div class="item">
<div class="header">標題1</div>
<div class="content">內容</div>
</div>
<div class="item">
<div class="header">標題2</div>
<div class="content hide">內容</div>
</div>
<div class="item">
<div class="header">標題3</div>
<div class="content hide">內容</div>
</div>
<div class="item">
<div class="header">標題4</div>
<div class="content hide">內容</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.header').click(function () {
// $(this).next() 下一個
// $(this).prev() 上一個
// $(this).parent() 父類
// $(this).children() 孩子
// $(this).siblings() 兄弟
// $(this).find(''#i1) 子子孫孫中查找
$(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')
})
</script>
</body>
</html>
jQurey實現隱藏菜單示例