隐藏/显示左frame栏

最新推荐文章于 2021-12-23 21:58:09 发布

IT编程猿

最新推荐文章于 2021-12-23 21:58:09 发布

阅读量3.5k

点赞数

分类专栏： JavaEE

本文链接：https://blog.csdn.net/maojycom/article/details/35584789

版权

JavaEE 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在做项目时需要用到frameSet，左边的一般是导航栏或者菜单栏，有时候需要实现隐藏左边导航栏或菜单栏，想csdn论坛一样，这样用户体验就显得更好了。

首先在总页面中创建frameset：

	 <frameset id="full" cols="180,*" framespacing="0" frameborder="no">
	 	<frame noresize scrolling="yes" src="${pageContext.request.contextPath }/left.jsp"/> 
	 	<frame name="right" noresize scrolling="yes" src="${pageContext.request.contextPath }/center.jsp"/>
	 </frameset>
	 <noframes>
		  <body>
		  </body>
	 </noframes>

在左导航栏创建隐藏链接的简单文字：

<div id="show-leftbar">
  	<span style="cursor:pointer;">显示左面板</span>
</div>

<style type="text/css">
       div#show-leftbar{
  	        position: fixed;
  		background-color:grey;
  		top:50%;
  		left:0;
  		width:15px;
  	}
  </style>

同理兼同上，在右边frame中也创建显示左边frame的链接。

js、jq实现隐藏显示功能:

       //隐藏/显示左边菜单栏
	$("#show-leftbar").hide();//默认进入首页时隐藏显示链接
	//点击隐藏链接事件
	$("#hide-leftbar").click(function(){
		//alert("hide");
		//js改变frameset实现隐藏
		window.parent.document.getElementById("full").cols = "0,*";
		//jq实现隐藏后显示右frame中的显示链接
		$("#show-leftbar",window.parent.right.document).show();
	});
	//点击显示链接事件
	$("#show-leftbar").click(function(){
		window.parent.document.getElementById("full").cols = "180,*";
		$("#show-leftbar").hide();
	});

这里需要获取父窗口以及父窗口的子窗口的元素：

获取父窗口中的元素：(js) window.parent.document.getElementById("父窗口元素id");

(jq) $("父窗口元素id",window.parent.document);

取父窗口的父窗口的元素：$("父窗口元素id", window.parent.parent.document);

获取父窗口的子窗口的元素：$("子窗口元素id", window.top.document)或$("子窗口元素id", window.parent.top.document);

献丑了。。