jq实现div左右飞起折叠并且div可以拉升

最新推荐文章于 2021-04-01 06:12:55 发布

echone_wenqian

最新推荐文章于 2021-04-01 06:12:55 发布

阅读量777

点赞数 1

分类专栏： HTML+CSS 文章标签： jquery 编辑器

本文链接：https://blog.csdn.net/qq_24729895/article/details/51507082

版权

HTML+CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

代码块

jquery-ui自己去下载需要引用jquery：

<!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=utf-8" />
<title>jquery实现网页右侧可展开折叠的DIV特效</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<!-- <script type="text/javascript" src="js/lanrenzhijia.js"></script> -->
<link href="css/lanrenzhijia.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="css/jquery-ui.min.css" />
<style>
.righteject {
    position:fixed;
    top:100px;
    right:0px;
    z-index:900000000;
    _position:absolute;/*兼容IE6*/
/*_top: expression(offsetParent.scrollTop+document.documentElement.clientHeight-this.offsetHeight);始终位于底部*/
_top: expression(documentElement.scrollTop+200);
}/*兼容IE6*/
.left_zhedie {
    width:20px;
    height:100px;
    text-align:center;
    display:block;
    float:left;
    font-size: 14px;
    background-color:#000;
    color:#FFF;
}
.content {
    width:0px;
    height:500px;
    overflow:hidden;
    float:left;
    background-color:#CCC;
}
.left_zhedie span {
    position:relative;
    display:block;
    z-index:999;
}
.rightejectthis {
    background-color:#930;
}
.left {
    position:fixed;
    top:100px;
    left:0px;
    z-index:900000000;
}
.right_zhedie{
    width:20px;
    height:100px;
    text-align:center;
    display:block;
    float:left;
    font-size: 14px;
    background-color:#000;
    color:#FFF;
}
.right_zhedie span {
    position:relative;
    display:block;
    z-index:999;
}</style>
</head>

<body>
<div class="righteject">
    <strong class="left_zhedie"><span>左边折叠标题</span></strong>
    <div class="content">
        <div id="con_title">我在右边，点我去左边</div>
    </div>
    <strong class="right_zhedie" style="display:none;"><span>右边折叠标题</span></strong>
</div>
<script>
$(document).ready(function(){
    $('.righteject strong').toggle(
        function () {
            $('.content').addClass("rightejectthis").animate({width: '+300px'}, "100");
        },
        function () {
        $('.content').removeClass("rightejectthis").animate({width: '-300px'}, "100");
        }
    );
    $('#con_title').toggle(
        function(){
            $(".left_zhedie").hide();
            $('.right_zhedie').show();
            $('.righteject').css('left','0px');
    },
        function(){
            $(".left_zhedie").show();
            $('.right_zhedie').hide();
            $('.righteject').css('left','');
    }
    );
});

//设置可折叠的div可以拉升
$(function(){
     $(".content").resizable();
});
</script>
</body>
</html>

echone_wenqian

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
jq实现div左右飞起折叠并且div可以拉升

代码块jquery-ui自己去下载需要引用jquery：<!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>
复制链接

扫一扫

专栏目录