Bootstrap3:如何使用两个非画布边栏

Bootstrap3: How to use two off-canvas sidebars?

本文关键字：两个 布边栏 何使用 Bootstrap3      更新时间：2023-09-26

我有这个模板，最初显示:Sidebar1 - Content - Sidebar2

但是当用户处于移动视图时，我需要消失两个侧边栏，并且可以通过一个按钮打开，一次一个…

Button1 -向右打开侧边栏1。Button2 -在左侧打开侧边栏2。

有人知道这是可能的还是已经完成了?

代码
        <div class="container">
        <div class="row row-offcanvas row-offcanvas-right">
            <div class="col-xs-2 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
                <div class="list-group">
                    <a href="#" class="list-group-item">Link</a>
                    <a href="#" class="list-group-item">Link</a>
                    <a href="#" class="list-group-item">Link</a>
                    <a href="#" class="list-group-item">Link</a>
                    <a href="#" class="list-group-item">Link</a>
                    <a href="#" class="list-group-item">Link</a>
                </div>
            </div><!--/span-->

            <div class="col-xs-12 col-sm-6">
                <p class="pull-left visible-xs">
                    <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas1">
                        Filters <i class="fa fa-arrow-right"></i>
                    </button>
                </p>
                <p class="pull-right visible-xs">
                    <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">
                        <i class="fa fa-arrow-left"></i>
                        Details</button>
                </p>
                <div class="jumbotron">
                    <h1>Hello, world!</h1>
                    <p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
                </div>
            </div><!--/span-->
            <div class="col-xs-3 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
                <div class="list-group">
                    <a href="#" class="list-group-item">Link</a>
                    <a href="#" class="list-group-item">Link</a>
                    <a href="#" class="list-group-item">Link</a>
                    <a href="#" class="list-group-item">Link</a>
                    <a href="#" class="list-group-item">Link</a>
                    <a href="#" class="list-group-item">Link</a>
                </div>
            </div><!--/span-->
        </div><!--/row-->

    </div>
Javascript

    $('[data-toggle=offcanvas]').click(function () {
    $('.row-offcanvas').toggleClass('active');
});
    $('[data-toggle=offcanvas1]').click(function () {
    $('.row-offcanvas').toggleClass('active');
});

让我们试一试…我在当前HTML的底部添加了一个新行，以表示在边缘显示但在切换按钮之前隐藏的相同链接。让我们先看一下HTML:

<div class="row">
            <div class="col-xs-3 col-sm-3  sidebar-offcanvas hide trial2" id="sidebar" role="navigation">
            <div class="list-group"> <a href="#" class="list-group-item">Link</a>
 <a href="#" class="list-group-item">Link</a>
 <a href="#" class="list-group-item">Link</a>
 <a href="#" class="list-group-item">Link</a>
 <a href="#" class="list-group-item">Link</a>
 <a href="#" class="list-group-item">Link</a>
            </div>
        </div>
    <div class="col-xs-3 col-sm-3 sidebar-offcanvas pull-right hide trial " id="sidebar" role="navigation">
            <div class="list-group"> <a href="#" class="list-group-item">Link</a>
 <a href="#" class="list-group-item">Link</a>
 <a href="#" class="list-group-item">Link</a>
 <a href="#" class="list-group-item">Link</a>
 <a href="#" class="list-group-item">Link</a>
 <a href="#" class="list-group-item">Link</a>
            </div>
        </div>
</div>

正如您所看到的，我复制并粘贴了完全相同的HTML，并添加了以下类:hide, trial, trial2

Class hide:这是一个内置的BootStrap类，隐藏指定标签内的所有内容。我在后面用jQuery来切换这个类。

Class trial/trial2:这只是我选择的一个随机名称，以确保切换效果能够正常工作，你可以随意命名它，但要确保你引用了标签。

让我们看看新的jQuery:

jQuery

$('[data-toggle=offcanvas]').click(function () {
    $('.trial2').toggleClass('hide');
});
$('[data-toggle=offcanvas1]').click(function () {
    $('.trial').toggleClass('hide');
});

这实际上和你的代码是一样的，但是我现在用它来切换隐藏的内容。

结论:

我还添加了一些其他的东西——比如当屏幕缩小到更小的尺寸时隐藏两个侧边导航条的能力。只要看一下我将通过JSFiddle提供的代码，你就会更好地理解它。

演示JSFiddle

我这样修改:

HTML

<div class="row-fluid row-offcanvas row-offcanvas-left">
<div class="row-fluid row-offcanvas row-offcanvas-right">
    <div id="filters"></div>
    <div id="content">
        <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <ul class="nav navbar-nav nav-pills">
                    <li class="visible-xs"><a> <span class="glyphicon glyphicon-filter" data-toggle="offcanvas" data-target=".sidebar-nav"></span> </a></li>
                    <li class="visible-xs"><a> <span class="glyphicon glyphicon-list-alt" data-toggle="offcanvas1" data-target=".sidebar-nav"></span> </a></li>
                </ul>
            </div>
        </nav>
    </div>
    <div id="detail"></div>
</div>

JAVASCRIPT

$('[data-toggle=offcanvas]').click(function() {
    $('.row-offcanvas-left').toggleClass('active');
});
    $('[data-toggle=offcanvasa]').click(function() {
    $('.row-offcanvas-right').toggleClass('active');
});
相关文章：