转载请注明出处：http://blog.csdn.net/dongdong9223/article/details/53408091 本文出自【我是干勾鱼的博客】
实现了一个点击按钮之后右侧弹出导航，再点击右侧导航隐藏回去的小功能，用到了jquery，直接放在html里就能实现，代码如下：
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <style> .aa { position: fixed; top: 0px; right: 0px; background:blue; word-break:break-all; transition: width 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s; } .bb { border: solid yellow; background: red; z-index:9988; } a#clickSide { position: fixed; top: 20px; right: 300px; } </style> <script type="text/javascript"> function narrow() { var isTrue=parseInt($('#clickSide').attr('value')); if(isTrue==0){ $('.aa').css({'width':'250px'}); $('#clickSide').attr('value',1); }else{ $('.aa').css({'width':'0'}); $('#clickSide').attr('value',0); } return false; } </script> </head> <body> <a id="clickSide" href="javascript:void(0)" onclick="narrow()" value="0">按钮</a> <div class="aa" style="width: 0px;"> <div class="bb">aaabbbcccdddeeefffggghhhiiijjjkkklll</div> <div class="bb">胡适的杂文很好看</div> <div class="bb">或者，你可以看看林语堂的小说</div> </div> </body> </html>点击按钮前：
点击按钮后：
再次点击按钮，导航就又收回右侧并隐藏了。
我在之前的文章《div缩小时，里面的英文不会溢出功能的实现》曾经提到过使用css的“word-break”属性会让英文完全限制在div中，这里就用到了这个属性。可以试试将其去掉是什么效果，能够看出来：
英文单词隐藏了一部分，或者说是溢出了一部分，由此可见“word-break”属性的效果还是很明显的。
可以参考：
《div缩小时，里面的英文不会溢出功能的实现》 《使用CSS3的“transition ”属性控制长宽度的缓慢变化》
