使用Boostrap,左侧菜单栏固定宽度,右侧自适应宽度。

本文介绍了一种通过自定义CSS类结合JavaScript实现侧边栏展开与折叠的方法,并探讨了其局限性,最后提出希望更多利用CSS本身特性进行优化。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、方法one

思路概要:

  1. 创建CSS自定义工具类,如ml-220p:margin-left:220px;
  2. 使用JS绑定元素,控制相应元素增加和删除自定义的CSS工具类,达到预期视觉效果。
  3. 不足之处是不够极客,完全可以用CSS控制的样式,需要JS来操作,多了一道手续,略显繁琐。

HTML部分:

<div class="container-fluid p-0 m-0">
    <div id="home_header" class="fixed-top ml-220p">
        <a class="btn btn-sm btn-primary" id="sidebar_toggle">收缩按钮</a>
        头部
    </div>
    <div id="home_sidebar" class="float-left position-fixed vh-100 bg-dark w-220p">
        <div id="sidebar_logo" class="text-center lh-50p bg-dark border-bottom border-primary text-white">这里是一个图标</div>
        <div id="sidebar_logo_mini" class="text-center lh-50p bg-dark border-bottom border-primary text-white d-none">图标</div>
    </div>
    <div id="home_body" class="row float-left mt-50p ml-220p">
       <div class="col-12">
           12312312312312312
       </div>
    </div>
    <div id="home_footer"></div>
</div>

CSS部分:

#home_header{
    height:50px;
    line-height: 50px;
    background: #97b99e;
    z-index: 1000;
}

#home_sidebar{
    z-index: 1001;
}
.ml-60p{margin-left: 60px}
.ml-220p{margin-left: 220px}
.w-60p{width: 60px;}
.w-220p{width: 220px;}
.mt-50p{margin-top: 50px;}
.lh-50p{height: 50px;line-height: 50px;}

JS部分

let home_base_script = function(){

    let initSidebarToggle = function () {
        //侧边栏收缩切换器
        $("#sidebar_toggle").click(function () {
            //动画效果 animate 有空再添加。
            $("#home_header").toggleClass("ml-220p").toggleClass("ml-60p"); // 头部缩进
            $("#home_body").toggleClass("ml-220p").toggleClass("ml-60p");   // 主体缩进
            $("#home_sidebar").toggleClass("w-220p").toggleClass("w-60p");  // 侧边栏缩进
            $("#sidebar_logo").toggleClass("d-none");       // 侧边栏logo缩进
            $("#sidebar_logo_mini").toggleClass("d-none");  // 侧边栏login缩进
        })
    };

    return {
        init:function () {
            initSidebarToggle()
        }
    }
}();

$(document).ready(function () {
    home_base_script.init()
});

2.2 细节说明:

就是JS,控制增加删除自定义CSS类,控制侧边栏缩进,和右侧主体body缩进,来实现的。但是随着时间的前进。我感觉非常不舒服。希望能更多由CSS自身实现。于是有了方法Two。

方法TWO的链接

 

转载于:https://my.oschina.net/asktao/blog/652775

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值