Fatal编程技术网
  • javascript/
  • Javascript 折叠一个列并自动调整另一个列

Javascript 折叠一个列并自动调整另一个列

javascript html css twitter-bootstrap-3 responsive-design

Javascript 折叠一个列并自动调整另一个列,javascript,html,css,twitter-bootstrap-3,responsive-design,Javascript,Html,Css,Twitter Bootstrap 3,Responsive Design,我正在努力使用我的用户界面（引导）。我可以通过单击左侧的小按钮来隐藏navbar。这很好，没有任何问题。它由css和一些包装器完成。但我不能为右侧（绿色面板）执行相同的功能。我也试着用崩溃类来做。如果这样做，主内容（红色窗口）不会自动缩放到右侧的全部可用空间。那么，怎样才能隐藏绿色面板并在全宽范围内缩放红色内容呢？这可以通过CSS或JavaScript实现。任何帮助都将不胜感激 小提琴： /* Sidebar Navigation Style */ .nav-sidebar { posi

我正在努力使用我的用户界面（引导）。我可以通过单击左侧的小按钮来隐藏
navbar
。这很好，没有任何问题。它由
css
和一些包装器完成。但我不能为右侧（绿色面板）执行相同的功能。我也试着用崩溃类来做。如果这样做，主内容（红色窗口）不会自动缩放到右侧的全部可用空间。那么，怎样才能隐藏绿色面板并在全宽范围内缩放红色内容呢？这可以通过
CSS
或
JavaScript
实现。任何帮助都将不胜感激

小提琴：

/* Sidebar Navigation Style */
.nav-sidebar {
    position: absolute;
    padding-left: 10px;
    width: 175px;
    height: 100%;
    z-index: 1000;
    display: block;
    background-color: #eee;
    border-right: 1px solid #eee;
}

/*          Wrapper           */
#wrapper {
    padding-left: 175px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#wrapper.toggled {
    padding-left: 0px;
}

/*       Sidebar Wrapper      */
#sidebar-wrapper {
    z-index: 1000;
    left: 0px;
    width: 0;
    height: 100%;
    margin-left: -205px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#sidebar-wrapper::-webkit-scrollbar {
    display: none;
}

/*       Main SVG Content     */
#visualization {
    display: inline-block;
    position: relative;
    left: 0px;
    width: 100%;
    padding-bottom: 100vh; /* aspect ratio */
    overflow: hidden;
}

<div class="container-fluid">
<div id="wrapper">
    <div id="sidebar-wrapper">
        <ul class="nav nav-sidebar sidebar">
            <li class="sidebar-brand">
                <a>NavBar</a>
            </li>
        </ul>
    </div> <!-- End Sidebar Wrapper -->
    <div class="row" id="row-main-content">
        <div class="col-xs-9" style="background-color: red">
            <button type="button" class="btn btn-primary btn-xs glyphicon glyphicon-indent-right" id="btnHide"></button>
            <button type="button" class="btn btn-primary btn-xs glyphicon glyphicon-list-alt pull-right" id="btnHide2"></button>
            <div class="container-fluid">
                <div class="row">
                    <div id="visualization">
                    </div>
                </div>
            </div>
        </div> <!-- End Page Content Wrapper -->
        <div class="col-xs-3" style="padding-right: 0px">
            <div class="panel panel-default">
                <div class="panel-body" style="height: 100vh; background-color: green">

                </div>
            </div>
        </div> <!-- End Panel Wrapper -->
    </div> <!-- End Row -->
</div> <!-- End Wrapper -->
</div>
CSS:

/* Sidebar Navigation Style */
.nav-sidebar {
    position: absolute;
    padding-left: 10px;
    width: 175px;
    height: 100%;
    z-index: 1000;
    display: block;
    background-color: #eee;
    border-right: 1px solid #eee;
}

/*          Wrapper           */
#wrapper {
    padding-left: 175px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#wrapper.toggled {
    padding-left: 0px;
}

/*       Sidebar Wrapper      */
#sidebar-wrapper {
    z-index: 1000;
    left: 0px;
    width: 0;
    height: 100%;
    margin-left: -205px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#sidebar-wrapper::-webkit-scrollbar {
    display: none;
}

/*       Main SVG Content     */
#visualization {
    display: inline-block;
    position: relative;
    left: 0px;
    width: 100%;
    padding-bottom: 100vh; /* aspect ratio */
    overflow: hidden;
}

<div class="container-fluid">
<div id="wrapper">
    <div id="sidebar-wrapper">
        <ul class="nav nav-sidebar sidebar">
            <li class="sidebar-brand">
                <a>NavBar</a>
            </li>
        </ul>
    </div> <!-- End Sidebar Wrapper -->
    <div class="row" id="row-main-content">
        <div class="col-xs-9" style="background-color: red">
            <button type="button" class="btn btn-primary btn-xs glyphicon glyphicon-indent-right" id="btnHide"></button>
            <button type="button" class="btn btn-primary btn-xs glyphicon glyphicon-list-alt pull-right" id="btnHide2"></button>
            <div class="container-fluid">
                <div class="row">
                    <div id="visualization">
                    </div>
                </div>
            </div>
        </div> <!-- End Page Content Wrapper -->
        <div class="col-xs-3" style="padding-right: 0px">
            <div class="panel panel-default">
                <div class="panel-body" style="height: 100vh; background-color: green">

                </div>
            </div>
        </div> <!-- End Panel Wrapper -->
    </div> <!-- End Row -->
</div> <!-- End Wrapper -->
</div>
HTML:

/* Sidebar Navigation Style */
.nav-sidebar {
    position: absolute;
    padding-left: 10px;
    width: 175px;
    height: 100%;
    z-index: 1000;
    display: block;
    background-color: #eee;
    border-right: 1px solid #eee;
}

/*          Wrapper           */
#wrapper {
    padding-left: 175px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#wrapper.toggled {
    padding-left: 0px;
}

/*       Sidebar Wrapper      */
#sidebar-wrapper {
    z-index: 1000;
    left: 0px;
    width: 0;
    height: 100%;
    margin-left: -205px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#sidebar-wrapper::-webkit-scrollbar {
    display: none;
}

/*       Main SVG Content     */
#visualization {
    display: inline-block;
    position: relative;
    left: 0px;
    width: 100%;
    padding-bottom: 100vh; /* aspect ratio */
    overflow: hidden;
}

<div class="container-fluid">
<div id="wrapper">
    <div id="sidebar-wrapper">
        <ul class="nav nav-sidebar sidebar">
            <li class="sidebar-brand">
                <a>NavBar</a>
            </li>
        </ul>
    </div> <!-- End Sidebar Wrapper -->
    <div class="row" id="row-main-content">
        <div class="col-xs-9" style="background-color: red">
            <button type="button" class="btn btn-primary btn-xs glyphicon glyphicon-indent-right" id="btnHide"></button>
            <button type="button" class="btn btn-primary btn-xs glyphicon glyphicon-list-alt pull-right" id="btnHide2"></button>
            <div class="container-fluid">
                <div class="row">
                    <div id="visualization">
                    </div>
                </div>
            </div>
        </div> <!-- End Page Content Wrapper -->
        <div class="col-xs-3" style="padding-right: 0px">
            <div class="panel panel-default">
                <div class="panel-body" style="height: 100vh; background-color: green">

                </div>
            </div>
        </div> <!-- End Panel Wrapper -->
    </div> <!-- End Row -->
</div> <!-- End Wrapper -->
</div>
我现在通过一点
jQuery

更新的小提琴：

jQuery部分
针对我的问题：

$("#btnHide2").click(function () {
    $(this).tooltip("hide");

    if ($('#panel-wrapper').hasClass('collapse')) {
        $('#page-content-wrapper').removeClass('col-xs-12').addClass('col-xs-9');
        $('#panel-wrapper').removeClass('collapse')
    }
    else {
        $('#page-content-wrapper').removeClass('col-xs-9').addClass('col-xs-12');
        $('#panel-wrapper').addClass('collapse')
    }
});
我现在通过一点
jQuery

更新的小提琴：

jQuery部分
针对我的问题：

$("#btnHide2").click(function () {
    $(this).tooltip("hide");

    if ($('#panel-wrapper').hasClass('collapse')) {
        $('#page-content-wrapper').removeClass('col-xs-12').addClass('col-xs-9');
        $('#panel-wrapper').removeClass('collapse')
    }
    else {
        $('#page-content-wrapper').removeClass('col-xs-9').addClass('col-xs-12');
        $('#panel-wrapper').addClass('collapse')
    }
});
请将链接发布到您的解决方案。请将链接发布到您的解决方案。