apbbbbb
旋转的钢笔
采纳率19.3%
2017-06-26 08:47 浏览 5.5k

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条回答 默认 最新

  • 已采纳
    github_38725775 算不算码农 2017-06-27 04: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");
                }
        });
    
    点赞 评论 复制链接分享
  • github_37125043 CN-cheng 2017-06-26 09:16

    改class也可以啊,点击让左边隐藏右边的 class="col-lg-12 col-sm-12",左边显示的时候右边的 class="col-lg-10 col-sm-10"

    点赞 1 评论 复制链接分享

相关推荐