您的位置：首页 > Web前端 > JQuery

右侧div点击收缩展开jquery代码实现

2015-10-23 14:46 671 查看 
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>浏览器右侧内容点击收缩展开实现</title>
<script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var divShow = true;
$(function(){
$("#navImg").click(function(){
var thisObj = $("#rightNav");
if (divShow) {
thisObj.each(function() {
$(this).animate({right : "-500"}, 300);
});
divShow = false;
} else {
thisObj.each(function() {
$(this).animate({right : "0"}, 300);
});
divShow = true;
}
});
});
</script>
</head>
<body>
<!-- 右侧导航 -->
<div id="rightNav" style="position:fixed; right:0; margin-top:200px;">
<div style="float: left;">
<img id="navImg" style="cursor:pointer;" src="image/arrow.png">
</div>
<div style="height:40px; width:500px; float:left; background:red;">
显示内容
</div>
</div>
</body>
</html>

 

阅读更多
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航