<!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 库
共54个文件
html:43个
xml:4个
js:2个
1 下载量 7 浏览量
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
共 54 条
- 1
资源评论
开局签到Python基础
- 粉丝: 699
- 资源: 65
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功