php栏目的展开与收缩
来源:互联网 发布:win10笔记本优化教程 编辑:程序博客网 时间:2024/06/07 00:24
先看一下实际的效果:
1.初始状态:
2.这里想要展示的效果就是当点击主栏目的时候他们可以把属于自己的子栏目展示出来:
这里是点击中国这个主栏目,然后展示出来属于他的子栏目
然后看一下点击加号的变化效果,在这里我添加了一个span元素<span class="open">+</span>
通过jquery实现,代码如下:
<script>
$('.open').click(function() {
// 首先需要判断一下目前的状态是出于加号的状态还是减号的状态
var status = $(this).text();
if(status == '+') {
$(this).text('-');
} else {
$(this).text('-');
}
});
</script>
这个比较容易实现
那么如何实现我们在上面刚刚提到的效果呢,有一个关键的步骤就是需要知道你点击的那个栏目的id,找到属于这个栏目的子id
我给每一行添加了两个属性:id,pid 这样就可以很容易获取你所点击的那一行栏目的id值,具体的实现代码如下:
$('.open').click(function() { // 当前的状态是展开还是处于收缩 var status = $(this).text(); // 获取所点击的某一行的 var id = $(this).parent().parent().attr('id'); if(status == '+') { $(this).text('-'); $('tr[pid='+id+']').show(); }else { $(this).text('+'); $.ajax({ type : 'POST', url : '{:url("cate/ajaxlst")}', dataType : 'json', data : {id:id}, success : function(data) { $.each(data,function(k,v) { $('tr[id='+v+']').hide(); $('tr[id='+v+']').find('span[class=open]').text('+'); }); } }); }});当栏目处于收缩的状态的时候,点击该栏目的时候需要查找tr中pid等于你所点击的栏目的id即:$('tr[pid='+id+']').show()
这样展开的功能就实现了,比较麻烦的就是收缩如何实现,在实现收缩的功能的时候遇到点问题,如果还是按照刚刚上面那个展开的方法来实行的话,会出现一个小小的bug,就是如果点击一级栏目属于这个一级栏目的三级栏目是不会收缩的,在这里我使用一个比较麻烦的办法就是使用ajax,将点击的父级栏目的id传到后台进行处理,找到属于这个父级栏目的所有子栏目然后返回进行遍历,代码如下:
这样栏目的收缩就实现了
阅读全文
0 0
- php栏目的展开与收缩
- 折叠展开收缩效果的栏目分类导航
- 折叠展开收缩效果的栏目分类导航
- js实现菜单的收缩与展开
- JQuery图片的收缩与展开
- 软键盘的收缩与展开
- 列表控件的展开与收缩
- Android 字体的展开与收缩
- JS实现段落的收缩与展开
- 表格展开与收缩
- TextView展开与收缩
- 展开收缩的层
- 信息的展开、收缩
- 展开与收缩菜单效果
- 客服中心展开与收缩
- jQuery收缩与展开特效
- html Div层的展开与收缩的特效
- javascript实现树形目录的收缩与展开
- Linux Scheduler – CFS and Virtual Run Time (vruntime)
- 在本机使用ssh链接virtualbox
- 冒泡排序笔记(内附代码)
- 查看源代码
- ubuntu kinect openni驱动安装
- php栏目的展开与收缩
- JDBCTemplate实现增删查改
- KMP(字符串匹配)
- 如何.xml文件中引入.dtd文件约束
- [Linux C语言](学习笔记)标准输入流输出流以及错误流
- RxJava线程切换代替Thread和Handler
- 使用IDEA将git上传项目到github
- MySQL复制功能介绍
- 多点触摸