jquery左右折叠框

Posted 飞鱼0725

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery左右折叠框相关的知识，希望对你有一定的参考价值。

网站左右折叠框：

<!DOCTYPE html>
<html>
<style>
#Kefclose,#Kefopen{position:absolute;left:-32px;top: 35%;display:block;width:32px;height: 100px;border-radius:15px 0 0 15px}
#Kefclose{background:url(../images/cclose.png) no-repeat center center #eee;background-size:20px;}
#Kefopen{background:url(../images/oopen.png) no-repeat center center #eee;background-size:20px;}
#Kefopen{display:none;}
</style>
<body>
<div id="online_qq_layer">
    <a href="javascript:;" id="Kefclose"></a>
    <a href="javascript:;" id="Kefopen"></a>
  </div>
<script>
    $(dunction(){
        $("#Kefclose").click(function () {
            $("#online_qq_layer").animate({
                marginRight:"-144px"
            
            }, "slow",function(){
                $("#Kefclose").hide();
                $("#Kefopen").show();
            });
           
        });
        $("#Kefopen").click(function () {
            $("#online_qq_layer").animate({
                marginRight:"-4px",
                
                display:"block"

            }, "slow", function () {
                $("#Kefopen").hide();
                $("#Kefclose").show();
            });

        });
    });
</script>
</body>
</html>

效果：

      

 

以上是关于jquery左右折叠框的主要内容，如果未能解决你的问题，请参考以下文章

26个jQuery代码片段使用技巧

片段项目不会折叠

jquery 下拉框左右选择

无法从 jQuery mobile 可折叠设备中移除蓝色光晕

前端Vue+Element UI案例：通用后台管理系统-Header+导航栏折叠

CSS可视化格式模型（CSS Mastery随笔）