一、需求：
使用jquery來(lái)實(shí)現(xiàn)二層嵌套的左側(cè)列表，點(diǎn)擊后顯示右側(cè)內(nèi)容的效果。
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-699270.html
二、思路：
- 為一級(jí)列表項(xiàng)和二級(jí)子列表項(xiàng)分別添加了點(diǎn)擊事件處理程序。
- 當(dāng)一級(jí)列表項(xiàng)被點(diǎn)擊時(shí)，使用.slideToggle()方法展開(kāi)或收起對(duì)應(yīng)的二級(jí)子列表項(xiàng)。
- 當(dāng)二級(jí)子列表項(xiàng)被點(diǎn)擊時(shí)，使用event.stopPropagation()方法阻止事件冒泡，并根據(jù)data-target屬性的值獲取對(duì)應(yīng)的右側(cè)內(nèi)容元素，并使用.show()方法將其顯示出來(lái)，同時(shí)隱藏其他右側(cè)內(nèi)容元素。
三、代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.min.js"></script>
<style>
.container {
display: flex;
}
.left-panel {
width: 30%;
background-color: #f2f2f2;
}
.left-list {
list-style: none;
padding: 0;
margin: 0;
}
.list-item {
padding: 10px;
cursor: pointer;
}
.sub-list {
list-style: none;
padding: 0;
margin: 10px 0 0 20px;
}
.sub-item {
padding: 5px;
cursor: pointer;
}
.right-panel {
flex: 1;
background-color: #fff;
}
.content {
display: none;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="left-panel">
<ul class="left-list">
<li class="list-item">
項(xiàng)目1
<ul class="sub-list">
<li class="sub-item" data-target="content1">子項(xiàng)目1</li>
<li class="sub-item" data-target="content2">子項(xiàng)目2</li>
<li class="sub-item" data-target="content3">子項(xiàng)目3</li>
</ul>
</li>
<li class="list-item">
項(xiàng)目2
<ul class="sub-list">
<li class="sub-item" data-target="content4">子項(xiàng)目4</li>
<li class="sub-item" data-target="content5">子項(xiàng)目5</li>
<li class="sub-item" data-target="content6">子項(xiàng)目6</li>
</ul>
</li>
<li class="list-item">
項(xiàng)目3
<ul class="sub-list">
<li class="sub-item" data-target="content7">子項(xiàng)目7</li>
<li class="sub-item" data-target="content8">子項(xiàng)目8</li>
<li class="sub-item" data-target="content9">子項(xiàng)目9</li>
</ul>
</li>
</ul>
</div>
<div class="right-panel">
<div class="content" id="content1">
<!-- 右側(cè)內(nèi)容1 -->1
</div>
<div class="content" id="content2">
<!-- 右側(cè)內(nèi)容2 -->2
</div>
<div class="content" id="content3">
<!-- 右側(cè)內(nèi)容3 -->3
</div>
<div class="content" id="content4">
<!-- 右側(cè)內(nèi)容4 -->4
</div>
<div class="content" id="content5">
<!-- 右側(cè)內(nèi)容5 -->5
</div>
<div class="content" id="content6">
<!-- 右側(cè)內(nèi)容6 -->6
</div>
<div class="content" id="content7">
<!-- 右側(cè)內(nèi)容7 -->7
</div>
<div class="content" id="content8">
<!-- 右側(cè)內(nèi)容8 -->8
</div>
<div class="content" id="content9">
<!-- 右側(cè)內(nèi)容9 -->9
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('.list-item').click(function() {
$(this).siblings().find('.sub-list').slideUp();
$(this).find('.sub-list').slideToggle();
});
$('.sub-item').click(function(event) {
event.stopPropagation();
var target = $(this).data('target');
$('.content').hide();
$('#' + target).show();
});
});
</script>
</body>
</html>
OK完成
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-699270.html
到了這里，關(guān)于h5開(kāi)發(fā)網(wǎng)站-使用jquery來(lái)實(shí)現(xiàn)二層嵌套的左側(cè)列表，點(diǎn)擊后顯示右側(cè)內(nèi)容的效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
