左侧菜单收缩的实现(包括,筛选器,addclass、removeclass、绑定事件,链式编程)
2024-09-06 00:47:42
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.head{
background-color: #2f96b4;
color: red;
}
.content{
min-height: 80px;
background-color: green;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div style="height: 400px;width: 200px;border: 1px solid #DDDDDD">
<div class="item">
<div class="head">标题1</div>
<div id="i1" class="content hide">内容1</div>
</div>
<div class="item">
<div class="head">标题2</div>
<div id="i2" class="content hide">内容1</div>
</div>
<div class="item">
<div class="head">标题3</div>
<div id="i3" class="content hide">内容1</div>
</div>
<div class="item">
<div class="head">标题4</div>
<div id="i4" class="content hide">内容1</div>
</div>
</div>
<script src="jquery.js"></script>
<script>
$('.head').click(function () {
$(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide');
// 当前点击的标签 $(this)
// 获取某个标签的下一个标签
// 获取某个标签的父标签
// 获取所有的兄弟标签
// 添加样式和移除样式
// $('.i1').addClass('hide')
// $('#i1').removeClass('hide')
// var v = $("this + div");
// $("label + input")
// console.log(v);
//
// $("afsldkfja;skjdf;aksdjf") // 筛选器
/*
$(this).next() 下一个
$(this).prev() 上一个
$(this).parent() 父
$(this).children() 孩子
$('#i1').siblings() 兄弟
$('#i1').find('#i1') 子子孙孙中查找
// . . .
//
$('#i1').addClass(..)
$('#i1').removeClass(..)
*/ // 链式编程
// $(...).click(function(){
// this..
// }) // $(this).next().removeClass('hide');
// $(this).parent().siblings().find('.content').addClass('hide') })
</script>
</body>
</html>
最新文章
- CentOS 7.0系统安装配置步骤详解
- Understanding, Operating and Monitoring Apache Kafka
- get,post 区别,HTTP通信
- Android学习笔记:TabHost 和 FragmentTabHost(转)
- 用 Xamarin for VS 创建 aar 文件的绑定
- Oracle中HWM与数据库性能的探讨
- 跨域技术-jsonp
- 拉姆达表达式 追加 条件判断 Expression<;Func<;T, bool>;>;
- sqlite 查询数据 不用回调
- 基于 Android 的 3D 视频样本代码
- Linux 按时间批量删除文件(删除N天前文件)
- teamview修改id
- 洛谷P3233 世界树 [HNOI2014] 虚树
- 5_Python OOP
- WPF解决按钮上被透明控件遮盖时无法点击问题
- 淘宝卖家搜索器V1.6算法注册机。
- BZOJ3270:博物馆(高斯消元)
- JSON.parse()——json字符串转JS
- Unity 游戏开发技巧集锦之材质的应用的创建反射材质
- [React] Use react-rewards to add microinteractions to React app to reward users for some actions
热门文章
- Linux架构之Rsync守护进程推和拉
- bzoj2325 [ZJOI2011]道馆之战 树链剖分+DP+类线段树最大字段和
- phpstorm 调试时浏览器显示The requested resource / was not found on this server
- 三栏布局的三个典型方法(圣杯、双飞翼、flex)
- Cobaltstrike系列教程(一)-简介与安装
- 小记:web安全测试之——固定session漏洞
- 对微信小程序的研究2
- darknet-yolov3使用opencv3.4.8时,undefined reference &#39;imshow()&#39;、&#39;waitKey()&#39;、&#39;nameWindows()&#39;
- MySQL跑得慢的原因分析
- No module named &#39;requests&#39;---问题解决记录