原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
发布时间:2024-04-17 10:06:48
标签:区块,折叠效果
需求是, 同一个页面, 有多组(不固定), 每组区块数量不一定一样的小区块. 要求每次只展开一个区块. 实现原理其实很简单, 点击导航, 若它的区块为隐藏, 则展开它, 同时, 隐藏掉同组其他区块; 若它的区块为展开, 则隐藏它, 同时, 展开同组其他区块中的一个. 一开始以为仅仅简单的两个遍历就能搞定. 但事实并非如此. 冷静思考了下, 通过点击的元素取到当前组的相关元素, 再单独处理当前组才合理. 顺着这个思路, 功能终于实现了, 写了原生Js版本, 用同样的思路写了个jQ版本. 时间关系, 写的也比较零散, 就没有封装. 其实, 对这种思路也不是很满意, 感觉太散了, 哪位大师有更好的思路请赐教.
jQ版区块的标题, 会有一个Js错误, 那是因为获取Js版下的h2时, 我偷了个懒, 把jQ的也遍历进去了. 我想, 实际应用中, 也不会有人同一个效果, 一边用Js一边用jQ吧. 核心代码点此查看样例
//原生Js版本 ***** start
window.onload=function(){
//共用函数区
var iBase={
//document.getElementById
Id: function(name){return document.getElementById(name)},
//通过class获取元素
GetByClass: function(name,tagName,elem){
var c=[];
var re=new RegExp('(^|\\s)'+name+'(|\\s$)');
var e=(elem || document).getElementsByTagName(tagName || '*');
for(var i=0; i < e.length; i++){
if(re.test(e[i].className)){
c.push(e[i]);
}
}
return c;
},
//获取样式属性
AttrStyle: function(elem,attr){
if(elem.attr){
return elem.style[attr];
}else if(elem.currentStyle){
return elem.currentStyle[attr];
}else if(document.defaultView && document.defaultView.getComputedStyle){
attr=attr.replace(/([A-Z])/g,'-$1').toLowerCase();
return document.defaultView.getComputedStyle(elem,null).getPropertyValue(attr);
}else{
return null;
}
},
//获取祖辈元素中符合指定样式的元素
Parents: function(elem,name){
var r=new RegExp('(^|\\s)'+name+'(|\\s$)');
elem=elem.parentNode;
if(elem!=null){
return r.test(elem.className) ? elem : iBase.Parent(elem,name) || null;
}
},
//取索引值
Index: function(cur,obj){
for(var i=0; i < obj.length; i++){
if(obj[i]==cur){
return i;
}
}
}
}
//变量定义
var listBox=iBase.GetByClass('js','div');
var navItem=iBase.Id('demo').getElementsByTagName('h2');//此处将jQ区块中的h2也取到了,所以页面会有个小小的错误
var icoItem=null,boxItem=null,boxDisplay=null,elemIndex=null,elemParent=null;
//初始化展开第一个
for(var i=0; i < listBox.length;i++){
iBase.GetByClass('box','div',listBox[i])[0].style.display='block';
listBox[i].getElementsByTagName('span')[0].innerHTML='-';
}
//遍历所有点击项
for(var i=0; i < navItem.length;i++){
navItem[i].onclick=function(){
elemParent=iBase.Parents(this,'js');//获取当前点击所在区块
navItem=elemParent.getElementsByTagName('h2');//获取当前区块下的点击项
icoItem=elemParent.getElementsByTagName('span');//获取当前区块下的展开关闭
boxItem=iBase.GetByClass('box','div',elemParent);//获取需要控制的区块
elemIndex=iBase.Index(this,navItem);//获取当前点击在当前区块点击项中的索引
//切换展开关闭图标
icoItem[elemIndex].innerHTML= icoItem[elemIndex].innerHTML=='-' ? '+' : '-';
if(iBase.AttrStyle(boxItem[elemIndex],'display')=='block'){
//控制项展开状态下,隐藏当前,展开其他的第一项
//此处有个展开0/1的判断,因为当点击第一个时是不能再展开第一个的
boxItem[elemIndex].style.display='none';
if(elemIndex==0){
boxItem[1].style.display='block';
icoItem[1].innerHTML='-'
}else{
boxItem[0].style.display='block'
icoItem[0].innerHTML='-'
}
}else{
//控制项展开状态下,展开当前,隐藏其他项
boxItem[elemIndex].style.display='block';
for(var k=0;k < boxItem.length; k++){
if(k!=elemIndex){
boxItem[k].style.display='none';
icoItem[k].innerHTML='+';
}
}
}
}
}
}
//jQuery版本 ***** start
$(function(){
//变量定义区
var _listBox=$('.jq');
var _navItem=$('.jq>h2');
var _boxItem=null, _icoItem=null, _parents=null, _index=null;
//初始化第一个展开
_listBox.each(function(i){
$(this).find('div.box').eq(0).show();
$(this).find('h2>span').eq(0).text('-');
});
//遍历所有的点击项
_navItem.each(function(i){
$(this).click(function(){
//找到当前点击父元素为listbox(单个区块)的元素
_parents=$(this).parents('.listbox');
_navItem=_parents.find('h2');//此区块中的点击项
_icoItem=_parents.find('span');//此区块中的展开关闭图标
_boxItem=_parents.find('div.box');//此区块中展开关闭项
_index=_navItem.index(this);//取得当前点击在当前区块下点击项中的索引值
if(_boxItem.eq(_index).is(':visible')){
//若当前点击项下的展开关闭项是显示的,则关闭,同时展开另外项中的第一个
_boxItem.eq(_index).hide().end().not(':eq('+_index+')').first().show();
_icoItem.eq(_index).text('+').end().not(':eq('+_index+')').first().text('-');
}else{
//若当前点击项下的展开关闭项是隐藏的,则展开,同时隐藏其他项
_boxItem.eq(_index).show().end().not(':eq('+_index+')').hide();
_icoItem.eq(_index).text('-').end().not(':eq('+_index+')').text('+');
}
});
});
});
演示地址:http://demo.aspxhome.com/js/jsjq-flod-onlyone/index.htm
打包下载:https://www.aspxhome.com/jiaoben/33950.html
本人来自Mr.Think的博客 http://mrthink.net/jsjq-flod-onlyone/
0
投稿
猜你喜欢
- 前言python学习之路任重而道远,要想学完说容易也容易,说难也难。很多人说python最好学了,但扪心自问,你会用python做什么了?刚
- 查看某一列中有多少中取值:数据集名.drop_duplicates(['列名'])#实际为删除重复项,删除后对原数据集不修改
- 序言哈喽兄弟们,今天咱们来了解一下 fileinput 。说到fileinput,可能90%的码农表示没用过,甚至没有听说过。这不奇怪,因为
- 一、VS2008工程设置工作 首先,建立一个windows应用程序的工程,将C/C++->预处理器->预处理器定义下的_WIND
- 本文实例为大家分享了python3实现弹弹球小游戏的具体代码,供大家参考,具体内容如下from tkinter import *from t
- 一般来说,函数(function)是组织好的、可重复使用的、具有一定功能的代码段。函数能提高应用的模块性和代码的重复利用率,在Python中
- 本文实例讲述了python实现定时同步本机与北京时间的方法。分享给大家供大家参考。具体如下:这段python代码首先从www.beijing
- 秒杀活动可以说在互联网上随处可见,从12306抢票,到聚划算抢购,我们生活的方方面面都可以看到秒杀的身影。秒杀的架构设计也是对于一个架构师架
- 现在的高手真是越来越多,我刚发现一个版主兄竟然在不支持数据库的ISP免费主页上使用数据库,套用QQ聊天的一句话就是:Faint!明明人家IS
- mysql5.7.18zip版本在windows的安装,就是解压,初始化,然后做一些密码修改的设置即可使用,如果需要远程连接,需要更改用户表
- 正常开发的时候,我们都手动去写要引入到包,有过java开发的同事,用过快捷键ctrl + alt + o 会自动引入所有的依赖包,pycha
- 简介ORA-10458: standby database requires recoveryORA-01196: 文件 1 由于介质恢复会
- request库是python的第三方库,它也是目前公认的爬取网页最好的第三方库,其特点是:简单、简洁,甚至用一行代码就能从网页上获取相关资
- 一、Python下载安装1、Python官方下载地址:https://www.python.org/downloads官方下载速度太慢,你可
- 最近老师布置了个作业,爬取豆瓣top250的电影信息。按照套路,自然是先去看看源代码了,一看,基本的信息竟然都有,心想这可省事多了。简单分析
- 本文实例讲述了python实现的简单窗口倒计时界面。分享给大家供大家参考。具体分析如下:下面的代码通过Tkinter制作windows窗口界
- 本文实例讲述了Python PyInstaller库基本使用方法。分享给大家供大家参考,具体如下:概述将.py源码转换成无需源代码的可执行文
- 方法一:在目前绝大部分数据库有分布式查询的需要。下面简单的介绍如何在oracle中配置实现跨库访问。比如现在有2个数据库服务器,安装了2个数
- 问题描述:已有的model,修改之后,想重新建模,于是将migrations文件夹中除__init__.py之外其他文件都删掉,再次执行以下
- 1.sort()首先看sort()方法,sort方法只能对列表进行操作,而sorted可用于所有的可迭代对象。a = [1, 5, 3, 4