求助，怎么做出如内容中的效果？

woaiwanb 2012-11-23 12:05:47

如下图所示，我想应该是js操作的，怎样做一个图中所示可开启、关闭侧边栏？
开启效果：

点击一下后的关闭效果：

就是点击显示会出现一个侧边栏，然后点击关闭，就消失，左边的内容填充过来，名字也会随点击做出相应变化。

跪求大神帮忙。

...全文

140 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

Giberson1 2012-11-24

打赏
举报

引用 7 楼 woaiwanb 的回复:

如三楼代码所示，的确能达到我要的效果啦，这里先谢谢啦。不过还有个小问题，就是如果输入的内容长度超出框架宽度，就会想向右延伸显示，而不会到边了就自动换行。请问怎么修改下才能随着边框转换的大小而自动换行，不超出各自的框架？现在的情况如下图

只要在div的style中加“word-wrap:break-word;”就可以了。

plzzz 2012-11-23

打赏
举报

刚刚接触JS??只想要效果的话,JQuery可以让你很快上手,JQeury插件应该会有这种现成的

Giberson1 2012-11-23

打赏
举报

其实就是，“关闭边栏”就是触发了相应的事件，将导航栏的DIV的宽度，设置为了0。

tptptp00 2012-11-23

打赏
举报

另外测试的话不要输1111这种会被认为是一个单词

tptptp00 2012-11-23

打赏
举报

word-break:break-all; word-wrap:break-word;

woaiwanb 2012-11-23

打赏
举报

如三楼代码所示，的确能达到我要的效果啦，这里先谢谢啦。
不过还有个小问题，就是如果输入的内容长度超出框架宽度，就会想向右延伸显示，而不会到边了就自动换行。请问怎么修改下才能随着边框转换的大小而自动换行，不超出各自的框架？
现在的情况如下图

xujorn 2012-11-23

打赏
举报

嗯同意四楼的此图必火

licip 2012-11-23

打赏
举报

或者用：display:none来实现。

sgyyz 2012-11-23

打赏
举报

其实就是用JS去控制层的样式，不碍乎就是宽度啊，是否显示啊这些，如果是要有动画效果，建议使用jQuery或者其他封装，人家写的效率高，好用！话说楼主的头像亮了……

Giberson1 2012-11-23

打赏
举报

给你写了一个例子：



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title> New Document </title>

<meta name="Generator" content="EditPlus">

<meta name="Author" content="">

<meta name="Keywords" content="">

<meta name="Description" content="">

<script type="text/javascript">

<!--

	function side(a){

		if(a.innerHTML == "关闭边栏"){

			document.getElementById("div2").style.display= "none";

			document.getElementById("div1").style.width = "400px";

			document.getElementById("div2").style.width = "0px";

			a.innerHTML = "打开边栏";

		}else{

			document.getElementById("div2").style.display= "";

			document.getElementById("div1").style.width = "300px";

			document.getElementById("div2").style.width = "100px";

			a.innerHTML = "关闭边栏";

		}

	}

//-->

</script>

</head>



<body>

<div style="margin-left: 320px;" onclick="side(this)" >关闭边栏</div><br />

<div id="div1"   style="float: left;width:300px;height:300px;background-color:#697896">

	11111111

</div>

<div id="div2"   style="float: left;width:100px;height:300px;background-color:#eeeeee" >

	222222222

</div>

</body>

</html>