旋转的钢笔
2017-06-26 08:47
采纳率: 99.2%
浏览 5.6k
已采纳

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-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");
            }
    });
    评论
    解决 无用
    打赏 举报
查看更多回答(1条)

报告相同问题？

提交

相关推荐 更多相似问题