Question

我有这个模板，最初显示： 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');
});

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切换这个类。

课堂试用/试用2 ：这只是我选择的一个随机名称，以确保切换效果能够正常工作，您可以随心所欲地命名它，但请确保参考标签

让我们看一下新的jQuery：

<强>的jQuery

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

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

它实际上与您拥有的代码相同，但我现在可以切换隐藏的内容。

结论：

我还添加了一些其他内容 - 例如当屏幕缩小到较小尺寸时隐藏两个侧导航条的功能。只需看一下我将通过JSFiddle提供的代码，您就会对它有所了解。

的 DEMO JSFiddle

Answer 2

我修好了这个：

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

Bootstrap3：如何使用两个非画布侧边栏？

2 个答案:

结论：

的 DEMO JSFiddle