旋转的钢笔 2017-06-26 00:47 采纳率: 54.5%
浏览 5768
已采纳

bootstrap 如何隐藏左边菜单栏

下面代码是一个模板页面,bootstrap如何控制点击按钮,左边菜单栏隐藏,右边内容自动扩大

     <!-- topbar ends -->
<div class="ch-container">
    <div class="row">


        <!-- left menu starts -->
        <div class="col-sm-2 col-lg-2" style="padding-left:0px;padding-right:0px;">
            <div class="sidebar-nav">
                <div class="nav-canvas">
                    <div class="nav-sm nav nav-stacked">

                    </div>
                    <ul class="nav nav-pills nav-stacked main-menu">
                        <li class="nav-header">#springMessage("main")</li>
                        #menubar($!{menus},$selectedMenu)
                    </ul>
                </div>
            </div>
        </div>
        <!--/span-->
        <!-- left menu ends -->

        <noscript>
            <div class="alert alert-block col-md-12">
                <h4 class="alert-heading">Warning!</h4>
                <p>You need to have <a href="http://en.wikipedia.org/wiki/JavaScript" target="_blank">JavaScript</a>
                    enabled to use this site.</p>
            </div>
        </noscript>
        <div id="content" class="col-lg-10 col-sm-10"  style="margin-top:10px">
           $screen_content   
        </div>
</div><!--/fluid-row-->

展开全部

  • 写回答

2条回答 默认 最新

  • 算不算码农 2017-06-26 20:55
    关注

    用JS 吧 我这有快代码你瞅瞅,或许有用
    main 是右侧内容块
    #list_left是左侧菜单
    closeMenu>span 是点击按钮

        var moveLeft = $("#list_left").width();
        $(".main").css({marginLeft:moveLeft});
        var isShow = true;
        $(".closeMenu span").click(function(){
                $(this).hide().siblings().show();
                if(isShow){
                        $("#list_left").animate({
                                marginLeft : - (moveLeft-15)
                        },200,"linear",function(){
                                isShow = false;
                                $(".closeMenu > span").css({
                                        opacity:1
                                });
                        });
                        $(".main").animate({margin:"0 auto",marginLeft:15},"linear");
                }else{
                        $("#list_left").animate({
                            marginLeft : 0
                        },200,"linear",function(){
                                isShow = true;
                        });
                        $(".main").animate({marginLeft:moveLeft},"linear");
                }
        });
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)
编辑
预览

报告相同问题?

悬赏问题

  • ¥15 MC9S12XS128单片机实验
  • ¥15 失败的github程序安装
  • ¥15 WSL上下载的joern在windows怎么用?
  • ¥15 jetson nano4GB
  • ¥15 电脑回复出厂设置,重装过程报错提示,求解决方案Windows 无法分析或处理无人参与应答文件 [C:\WINDOWS\Panther\unattend.xml,如何解决?
  • ¥15 进入lighttools中的UDOP编辑器的方法
  • ¥15 求Gen6d训练数据集
  • ¥20 liunx中winscp中可以登入ftp,但是不能登入sftp,如何解决
  • ¥15 lighttools的光学属性自定义的用法流程
  • ¥15 uni-app动态修改推荐页内容时报错
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部