Javascript 垂直滑动伸缩菜单

最新推荐文章于 2024-09-16 08:47:17 发布
最新推荐文章于 2024-09-16 08:47:17 发布
阅读量739 收藏
点赞数
分类专栏： javascript 前端 文章标签： javascript

Javascript 垂直滑动伸缩菜单



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="author" content="Pony" />
<title>垂直滑动伸缩菜单</title>
<style type="text/css">
/*不同的菜单可以应用不同的样式*/
.container{ float:left; margin:10px; width:200px; border:2px solid red; }
.container1{ float:left; margin:10px; width:200px; border:2px solid blue; }
.container2{ float:left; margin:10px; width:200px; border:2px solid green; }
.toggleblock1{ overflow:hidden; color:red; }
.toggletitle1{ margin:0; padding:5px; color:blue; }
.toggletitle1 span{ float:right; cursor:pointer; }
.toggleblock2{ overflow:hidden; background:#ddd; color:blue; }
.toggletitle2{ margin:0; padding:5px; color:green; }
.toggletitle2 span{ float:right; cursor:pointer; }
/* 以下CSS为满足效果需要的最少代码，可以在此基础上扩充但不能缩减 */
.toggleblock{ overflow:hidden; }
.toggletitle{ margin:0; padding:5px; }
.toggletitle span{ float:right; cursor:pointer; }
</style>
</head>
<body>
<div id="test" class="container">
<div class="toggleblock">
<h4 class="toggletitle"><span>-</span>栏目标题一</h4>
<div>字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
</div>
<div class="toggleblock">
<h4 class="toggletitle"><span>-</span>栏目标题二</h4>
<div>字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
</div>
<div class="toggleblock">
<h4 class="toggletitle"><span>-</span>栏目标题三</h4>
<div>字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
</div>
</div>
<div id="test1" class="container1">
<div class="toggleblock1">
<h4 class="toggletitle1"><span>-</span>栏目标题一</h4>
<div>字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
</div>
<div class="toggleblock1">
<h4 class="toggletitle1"><span>-</span>栏目标题二</h4>
<div>字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
</div>
<div class="toggleblock1">
<h4 class="toggletitle1"><span>-</span>栏目标题三</h4>
<div>字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
</div>
</div>
<div id="test2" class="container2">
<div class="toggleblock2">
<h4 class="toggletitle2"><span>-</span>栏目标题一</h4>
<div>字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
</div>
<div class="toggleblock2">
<h4 class="toggletitle2"><span>-</span>栏目标题二</h4>
<div>字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
</div>
<div class="toggleblock2">
<h4 class="toggletitle2"><span>-</span>栏目标题三</h4>
<div>字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
</div>
</div>
<script type="text/javascript">
function getElementsByClassName(id,cls){
var o=document.getElementById(id);
var aelem=[],
oaelem=o.getElementsByTagName("*");
for(var i=0;i<oaelem.length;i++){
if (oaelem[i].className==cls ){
aelem[aelem.length]=oaelem[i];
}
}
return aelem;
}
function slideshow(obj){
//标题对象
var otitle=obj.getElementsByTagName("h4")[0];
//待伸缩的层对象
var oblock=obj.getElementsByTagName("div")[0];
//触发链接对象
var olink=otitle.firstChild;
//整个菜单的高度
var i=obj.offsetHeight;
if(i<(otitle.offsetHeight+oblock.offsetHeight)){
i+=10;
obj.style.height=i+"px";
}else{
clearInterval(t);
olink.οnclick=function(){t2=setInterval(function(){slidehidden(obj)},10)}
//这里放图片文字都行
olink.innerHTML="-";
}
}
function slidehidden(obj){
//标题对象
var otitle=obj.getElementsByTagName("h4")[0];
//待伸缩的层对象
var oblock=obj.getElementsByTagName("div")[0];
//触发链接对象
var olink=otitle.firstChild;
//整个菜单的高度
var i=obj.offsetHeight
if(i>otitle.offsetHeight){
i-=10;
obj.style.height=i+"px";
}else{
clearInterval(t2);
olink.οnclick=function(){t=setInterval(function(){slideshow(obj)},10)}
//这里放图片文字都行
olink.innerHTML="+";
}
}
//第一个参数是菜单BLOCK的ID名，第二个参数是每一个菜单项目的CLASS名，不同的菜单样式可以不同
var a=getElementsByClassName("test","toggleblock");
var b=getElementsByClassName("test1","toggleblock1");
var c=getElementsByClassName("test2","toggleblock2");
//如果需要添加菜单，添加以下项目即可，同时增加数组duality
//var d=getElementsByClassName("test3","toggleblock3");
var duality=[a,b,c]
for(var m=0;m<duality.length;m++){
for(var n=0;n<duality[m].length;n++){
var olink=duality[m][n].getElementsByTagName("h4")[0].firstChild;
olink.οnclick=new Function("t2=setInterval(function(){slidehidden(duality["+m+"]["+n+"])},10)");
}
}
</script>
</body>
</html> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="author" content="Pony" />
<title>垂直滑动伸缩菜单</title>
<style type="text/css">
/*不同的菜单可以应用不同的样式*/
.container{ float:left; margin:10px; width:200px; border:2px solid red; }
.container1{ float:left; margin:10px; width:200px; border:2px solid blue; }
.container2{ float:left; margin:10px; width:200px; border:2px solid green; }
.toggleblock1{ overflow:hidden; color:red; }
.toggletitle1{ margin:0; padding:5px; color:blue; }
.toggletitle1 span{ float:right; cursor:pointer; }
.toggleblock2{ overflow:hidden; background:#ddd; color:blue; }
.toggletitle2{ margin:0; padding:5px; color:green; }
.toggletitle2 span{ float:right; cursor:pointer; }
/* 以下CSS为满足效果需要的最少代码，可以在此基础上扩充但不能缩减 */
.toggleblock{ overflow:hidden; }
.toggletitle{ margin:0; padding:5px; }
.toggletitle span{ float:right; cursor:pointer; }
</style>
</head>
<body>
<div id="test" class="container">
	<div class="toggleblock">
		<h4 class="toggletitle"><span>-</span>栏目标题一</h4>
		<div>字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
	</div>
	<div class="toggleblock">
		<h4 class="toggletitle"><span>-</span>栏目标题二</h4>
		<div>字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
	</div>
	<div class="toggleblock">
		<h4 class="toggletitle"><span>-</span>栏目标题三</h4>
		<div>字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
	</div>
</div>
<div id="test1" class="container1">
	<div class="toggleblock1">
		<h4 class="toggletitle1"><span>-</span>栏目标题一</h4>
		<div>字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
	</div>
	<div class="toggleblock1">
		<h4 class="toggletitle1"><span>-</span>栏目标题二</h4>
		<div>字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
	</div>
	<div class="toggleblock1">
		<h4 class="toggletitle1"><span>-</span>栏目标题三</h4>
		<div>字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
	</div>
</div>
<div id="test2" class="container2">
	<div class="toggleblock2">
		<h4 class="toggletitle2"><span>-</span>栏目标题一</h4>
		<div>字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
	</div>
	<div class="toggleblock2">
		<h4 class="toggletitle2"><span>-</span>栏目标题二</h4>
		<div>字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
	</div>
	<div class="toggleblock2">
		<h4 class="toggletitle2"><span>-</span>栏目标题三</h4>
		<div>字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
	</div>
</div>
<script type="text/javascript">
function getElementsByClassName(id,cls){
	var o=document.getElementById(id);
	var aelem=[],
	oaelem=o.getElementsByTagName("*");
	for(var i=0;i<oaelem.length;i++){
		if (oaelem[i].className==cls ){
			aelem[aelem.length]=oaelem[i];
		}
	}
	return aelem;
}
function slideshow(obj){
	//标题对象
	var otitle=obj.getElementsByTagName("h4")[0];
	//待伸缩的层对象
	var oblock=obj.getElementsByTagName("div")[0];
	//触发链接对象
	var olink=otitle.firstChild;
	//整个菜单的高度
	var i=obj.offsetHeight;
	if(i<(otitle.offsetHeight+oblock.offsetHeight)){
		i+=10;
		obj.style.height=i+"px";
	}else{
		clearInterval(t);
		olink.οnclick=function(){t2=setInterval(function(){slidehidden(obj)},10)}
		//这里放图片文字都行
		olink.innerHTML="-";
	}
}
function slidehidden(obj){
	//标题对象
	var otitle=obj.getElementsByTagName("h4")[0];
	//待伸缩的层对象
	var oblock=obj.getElementsByTagName("div")[0];
	//触发链接对象
	var olink=otitle.firstChild;
	//整个菜单的高度
	var i=obj.offsetHeight
	if(i>otitle.offsetHeight){
		i-=10;
		obj.style.height=i+"px";
	}else{
		clearInterval(t2);
		olink.οnclick=function(){t=setInterval(function(){slideshow(obj)},10)}
		//这里放图片文字都行
		olink.innerHTML="+";
	}
}
//第一个参数是菜单BLOCK的ID名，第二个参数是每一个菜单项目的CLASS名，不同的菜单样式可以不同
var a=getElementsByClassName("test","toggleblock");
var b=getElementsByClassName("test1","toggleblock1");
var c=getElementsByClassName("test2","toggleblock2");
//如果需要添加菜单，添加以下项目即可，同时增加数组duality
//var d=getElementsByClassName("test3","toggleblock3");
var duality=[a,b,c]
for(var m=0;m<duality.length;m++){
	for(var n=0;n<duality[m].length;n++){
		var olink=duality[m][n].getElementsByTagName("h4")[0].firstChild;
		olink.οnclick=new Function("t2=setInterval(function(){slidehidden(duality["+m+"]["+n+"])},10)");
	}
}
</script>
</body>
</html>





姜_森
关注
专栏目录
垂直伸缩菜单——bootstrap手风琴嵌套
yekonglieshou的博客
09-19 9927
bootstrap的折叠插件collapse具有可伸缩的效果，将其进行嵌套使用就可以摇身一变成为一个垂直伸缩的菜单了。 关于collapse的基本用法可以参考 http://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html ，里面会有较详细的用法。 <!DOCTYPE html> <html> <head> <title></t
layui左侧菜单/垂直导航菜单 滑动效果
qq_27246419的博客
12-24 4406
layui左侧菜单/垂直导航菜单 滑动效果修改 文件地址： 注释css： 修改： 代码. clickThis: function () { var t = a(this), i = t.parents(o), n = i.attr("lay-filter"), s = t.parent(), c = t.siblings("." + d), y = "string" == typeof s.
垂直滑动菜单
woaitiyu的专栏
11-01 787
http://www.lanrentuku.com/" />www.lanrentuku.comtd {font-size: 12px;}                        width="200" />              var number=8;function LMYC() {var lbmc;//var treePic;    for (i=1;i       
jquery实现具有收缩功能的垂直导航菜单
10-22
主要介绍了jquery实现具有收缩功能的垂直导航菜单点击可以展开折叠的导航菜单，感兴趣的小伙伴们可以参考一下
javascript滑动伸缩效果(兼容IE/FF)
GOD'S SON
08-01 634
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">诗词展示<!--* { margin:0; padding:0; border:0;}body
Js 竖直伸缩菜单(百度)
10-29
JavaScript 竖直伸缩菜单是一种常见的网页交互设计，它允许用户通过点击一级菜单标题来展开或收起对应的二级子菜单。这种菜单在网站导航、信息分类等方面非常实用，尤其适用于内容较多且需要层次结构展示的情况。...
垂直手风琴滑动菜单列表特效.zip
03-20
"垂直手风琴滑动菜单列表特效"是一种常见的网页导航设计，它能有效地节省空间并提供良好的导航体验。这种效果通常是通过结合HTML5、CSS3和JQuery来实现的，使得用户可以点击一个菜单项，其子菜单则以动画形式展开或...
css3实现的左侧菜单伸缩滑动特效源码.zip
11-02
解压“css3实现的左侧菜单伸缩滑动特效源码.zip”后，你可以查看HTML结构、CSS样式和可能存在的JavaScript代码，以了解具体实现细节。通过学习和理解这段代码，开发者可以提升自己在CSS3动态效果方面的技能，进而...
jQuery上下收缩滑动树型菜单代码
10-04
jQuery提供了`.slideToggle()`方法，它可以优雅地处理元素的显示和隐藏，包括垂直方向上的滑动效果。通过设置动画的持续时间和时机，我们可以控制菜单展开和收起的速度，提升用户体验。 此外，为了保持良好的代码...
JavaScript实现滑动折叠
Ajax Asp.Net 的专栏
11-02 816
 style>td{font-size:9pt;cursor:hand;}style>table width="100" border="0" cellspacing="0" cellpadding="0" id="SHArea">    tr>        td align="center">        table width="100%" border="1" cellpaddi
竖直伸缩菜单实现每次只能伸展一个菜单
ava_chc的专栏
01-19 149
网上简单的竖直伸缩菜单很多，但是实现打开一个，其他之前打开自动关闭的很少，其实js实现很容易。只要在打开之前关闭所有菜单，再打开所要打开的菜单就可以了。 js实现：在打开函数前加入 #("dd").slipeUp("fast"); 解决。...
JS实现菜单的伸缩
脱耦的博客
08-17 4313
 废话不多说，直接上源码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;菜单伸缩&lt;/title&gt; &lt;script type="text/javascript" src="js/jquer
用JavaScript写出菜单栏收缩功能
tamofig的博客
05-12 2018
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &
【JavaScript】LeetCode：707设计链表
weixin_45980065的博客
09-14 718
【代码】【JavaScript】LeetCode：707设计链表。
使用 uni-app 开发微信小程序的详细指南
最新发布
2301_79685859的博客
09-16 1007
uni-app是一个使用 Vue.js 框架开发跨平台应用的前端框架。开发者通过编写一套代码，可以生成多端应用，包括 H5、iOS、Android、微信小程序、支付宝小程序、字节跳动小程序等。
Vue接入高德地图并实现基本的路线规划功能
黄团团的个人博客
09-11 669
找到public目录下的index.html文件，把刚才申请好的2个密钥分别粘贴进去，第一个securityJsCode是填入安全密钥，第二个红框是填入Key。登录高德开放平台，点击我的应用，先添加新应用，然后再添加Key。如图所示填写对应的信息，系统就会自动生成。
JS的输出语句
J3259392566的博客
09-13 347
js中严格区分大小写。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值