<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>菜单栏练习</title>
<script src="js/code.jquery.com_jquery-3.7.1.min.js"></script>
<style>
/* 右侧布局 */
.right {
width: 80%;
height: 100%;
}
/* 左侧布局 */
.left {
width: 20%;
height: 100%;
background-color: rgb(43, 43, 45);
position: fixed;
top: 0;
left: 0;
border: #352c2c inset 1px;
}
/* 菜单组: 外间距, 边框 */
.group {
margin: 10px;
border: red inset 1px;
}
.title {
/* 标题: 文字居中, 上下外边距, 字体颜色. */
text-align: center;
margin: 10px 0;
color: aqua;
}
/* 子菜单: 背景颜色, 上边框 */
.item {
background-color: rgba(0, 0, 0, 0.2);
border-top: #1beb00 inset 1px;
}
/* 子菜选项: 文字居中, 内边距, 字体颜色, 边框 */
.content {
text-align: center;
padding: 5px;
color: #7fbce1;
border: dimgray inset 1px;
}
/*隐藏子菜单*/
.hied {
display: none;
}
</style>
</head>
<body>
<!--页面布局2:8-->
<div>
<!-- 左侧布局 -->
<div class="left">
<div class="group">
<div class="title">Python</div>
<div class="item hied">
<div class="content">基础</div>
<div class="content">进阶</div>
<div class="content">高阶</div>
</div>
</div>
<div class="group">
<div class="title">前端</div>
<div class="item hied">
<div class="content">HTML</div>
<div class="content">CSS</div>
<div class="content">HTML</div>
</div>
</div>
<div class="group">
<div class="title">数据库</div>
<div class="item hied">
<div class="content">MySQL</div>
<div class="content">MongoDB</div>
<div class="content">Redis</div>
</div>
</div>
</div>
<!-- 右侧布局 -->
<div class="right"></div>
</div>
<script>
// 获取节点title元素节点.
$('.title').click(function () {
// 在点击标题时展开相应的子菜单, 并隐藏父标签的其他兄弟标签下的子菜单.
$(this).next().removeClass('hied').parent().siblings().find('.item').addClass('hied')
})
</script>
</body>
</html>
22.3 jQuery 库
39 浏览量
2023-09-24
19:43:39
上传
评论
收藏 515KB ZIP 举报
22.3 jQuery 库.zip （54个子文件） 
jQuery 
3. form_filter.html 3KB 17. add_child_elements.html 569B 12. content_set.html 638B 41. animation_queue.html 822B 38. multi_parameter_settings.html 1KB 27. login_verification 2.html 2KB 28. each.html 374B 30. implicit_iteration.html 532B 4. filter_method.html 2KB 20. replace_element.html 630B 18. add_sibling_elements.html 517B js 
code.jquery.com_jquery-3.7.1.min.js 85KB 2. filter.html 2KB 21. clone_element.html 943B 34. set_the_transparency.html 896B 35. expansion_and_contraction.html 968B 10 position_Set.html 3KB 9. left_menu.html 3KB 11. size_set.html 956B .idea jQuery.iml 291B workspace.xml 5KB inspectionProfiles profiles_settings.xml 174B modules.xml 271B .gitignore 184B jsLibraryMappings.xml 192B 31. element_data.html 901B 8. z_index.html 2KB package.json 220B 33. fade_in_and_out.html 1KB 26. event_delegate.html 2KB 22. hover_events.html 588B 40. predefined_values.html 1014B 32. show_and_hide_elements.html 597B 25. event_bubbling.html 836B 15. login_verification.html 2KB 19. delete_element.html 847B 37. slide_animation.html 1KB 6. class_set.html 1KB 36. like_the_animation.html 1KB 29. each2.html 636B 1. cdn_jQuery.html 479B 24. default_behavior.html 765B 23. input_events.html 481B 5. attr_set.html 880B 42. animation_queue2.html 610B 7. css_set.html 572B 0. use_jQuery.html 471B 16. property_set.html 803B 39. relative_value.html 1KB 14. input_value.html 3KB 13. text_content.html 517B jQuery库.eddx 402KB code.jquery.com_jquery-3.7.1.min.js 85KB 22.3 jQuery 库.md 87KB资源评论
