javascript - Bootstrap 3 : How to use two off-canvas sidebars?

Question

我有这个最初显示的模板:Sidebar1 - 内容 - Sidebar2

但是当用户在移动 View 中时，我需要让两个侧边栏消失并且可以通过一个按钮打开，一次一个...

Button1 - 打开右边的 sidebar1。Button2 - 打开左侧的 sidebar2。

有人知道这是否可行或已经完成了吗？

代码

        <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');
});

Answer 1

让我们试一试...我在您当前 HTML 的底部添加了一个新行来表示显示在边缘上但在切换按钮之前隐藏的完全相同的链接。让我们先看一下 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

类隐藏:这是一个内置的 BootStrap 类，可隐藏指定标签内的所有内容。稍后我会用 jQuery 切换这个类。

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

让我们看看新的 jQuery:

jQuery

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

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

它实际上与您使用的代码相同，但我现在使用它来切换隐藏内容。

结论:

我还添加了一些其他内容 - 例如在屏幕缩小到较小尺寸时隐藏两侧导航栏的功能。只需看看我将通过 JSFiddle 提供的代码，您就会更好地理解它。

DEMO JSFiddle