Bootstrap 两侧（左侧和右侧）的 offcanvas 示例

Question

我正在尝试 bootstrap offcanvas example work for both sides. So far I managed to make it slide on both sides, but as I am not very good with css for some reason menus are not in place where they should be. There was very similar template in bootply so here is very similar example where I am here

$(document).ready(function() {
  $('[data-toggle="offcanvas"]').click(function () {
            $('.row-offcanvas-both').toggleClass('leftActive');
  });
  $('[data-toggle="offcanvas-right"]').click(function () {
    $('.row-offcanvas-both').toggleClass('rightActive');
  });
});

body {
  padding-top: 51px;  
}
.text-center {
  padding-top: 20px;
}
.col-xs-12 {
  background-color: #fff;
}
#sidebar {
  height: 100%;
  padding-right: 0;
  padding-top: 20px;
}
#sidebar .nav {
  width: 95%;
}
#sidebar li {
  border:0 #f2f2f2 solid;
  border-bottom-width:1px;
}

/* collapsed sidebar styles */
@media screen and (max-width: 767px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
  }
  .row-offcanvas-right
  .sidebar-offcanvas {
    right: -41.6%;
  }

  .row-offcanvas-left
  .sidebar-offcanvas {
    left: -41.6%;
  }
  .row-offcanvas-right.active {
    right: 41.6%;
  }
  .row-offcanvas-left.active {
    left: 41.6%;
  }
  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 41.6%;
  }
  #sidebar {
    padding-top:0;
  }


  /* something that I tried to make both sides work */
      .row-offcanvas-both
    .sidebar-offcanvas-rigth {
        right: -75%; /* 9 columns */
    }

    .row-offcanvas-both
    .sidebar-offcanvas-left {
        left: -75%; /* 9 columns */
    }
 
   .row-offcanvas-both.rightActive {
        right: 75%; /* 9 columns */
    }

    .row-offcanvas-both.leftActive {
        left: 75%; /* 9 columns */
    }

  #sidebar-right {
    height: 100%;
    padding-right: 0;
    padding-top: 20px;
  }
  #sidebar-right .nav {
    width: 95%;
  }
  #sidebar-right li {
    border:0 #f2f2f2 solid;
    border-bottom-width:1px;
  }

#sidebar-right {
    padding-top:0;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-container">
  
 <!-- top navbar -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
       <div class="container">
     <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="offcanvas-right" data-target=".sidebar-nav">
             right
           </button>
           <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".sidebar-nav">
             left
           </button>
           <a class="navbar-brand" href="#">Project Name</a>
     </div>
       </div>
    </div>
      
    <div class="container">
      <div class="row row-offcanvas row-offcanvas-both">
        
        <!-- sidebar -->
        <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">Link 1</a></li>
              <li><a href="#">Link 2</a></li>
              <li><a href="#">Link 3</a></li>              
            </ul>
        </div>
   
        <!-- main area -->
        <div class="col-xs-12 col-sm-6">
          <h1>Shrink Width to Collapse Sidebar</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula. 
            Nulla faucibus cursus metus in sagittis. Nunc elit leo, imperdiet in ligula in, euismod varius est. 
            Aenean pellentesque lorem a porttitor placerat. Vestibulum placerat nunc ac rutrum fringilla. Donec 
            arcu leo, tempus adipiscing volutpat id, congue in purus. Pellentesque scelerisque mattis nibh vel 
            semper. Sed a risus purus. Fusce pulvinar, velit eget rhoncus facilisis, enim elit vulputate nisl, a 
            euismod diam metus eu enim. Nullam congue justo vitae justo accumsan, sit amet malesuada nulla sagittis. 
            Nam neque tellus, tristique in est vel, sagittis congue turpis. Aliquam nulla lacus, laoreet dapibus 
            odio vitae, posuere volutpat magna. Nam pulvinar lacus in sapien feugiat, sit amet vestibulum enim 
            eleifend. Integer sit amet ante auctor, lacinia sem quis, consectetur nulla.</p>
    
          <p>Vestibulum porttitor massa eget pellentesque eleifend. Suspendisse tempor, nisi eu placerat auctor, 
            est erat tempus neque, pellentesque venenatis eros lorem vel quam. Nulla luctus malesuada porttitor. 
            Fusce risus mi, luctus scelerisque hendrerit feugiat, volutpat gravida nisi. Quisque facilisis risus 
            in lacus sagittis malesuada. Suspendisse non purus diam. Nunc commodo felis sit amet tortor 
            adipiscing varius. Fusce commodo nulla quis fermentum hendrerit. Donec vulputate, tellus sed 
            venenatis sodales, purus nibh ullamcorper quam, sit amet tristique justo velit molestie lorem.</p>
    
          <p>Fusce sollicitudin lacus lacinia mi tincidunt ullamcorper. Aenean velit ipsum, vestibulum nec 
            tincidunt eu, lobortis vitae erat. Nullam ultricies fringilla ultricies. Sed euismod nibh quis 
            tincidunt dapibus. Nulla quam velit, porta sit amet felis eu, auctor fringilla elit. Donec 
            convallis tincidunt nibh, quis pellentesque sapien condimentum a. Phasellus purus dui, rhoncus 
            id suscipit id, ornare et sem. Duis aliquet posuere arcu a ornare. Pellentesque consequat libero 
            id massa accumsan volutpat. Fusce a hendrerit lacus. Nam elementum ac eros eu porttitor. 
            Phasellus enim mi, auctor sit amet luctus a, commodo fermentum arcu. In volutpat scelerisque 
            quam, nec lacinia libero.</p>
    
          <p>Aliquam a lacinia orci, iaculis porttitor neque. Nullam cursus dolor tempus mauris posuere, eu 
            scelerisque sem tincidunt. Praesent blandit sapien at sem pulvinar, vel egestas orci varius. 
            Praesent vitae purus at ante aliquet luctus vel quis nibh. Mauris id nulla vitae est lacinia 
            rhoncus a vel justo. Donec iaculis quis sapien vel molestie. Aliquam sed elementum orci. 
            Vestibulum tristique tempor risus et malesuada. Sed eget ligula sed quam placerat dapibus. 
            Integer accumsan ac massa at tempus.</p>
          
        </div><!-- /.col-xs-12 main -->
        
        <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar-right" role="navigation">
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">Right Link 1</a></li>
              <li><a href="#">Right Link 2</a></li>
              <li><a href="#">Right Link 3</a></li>              
            </ul>
        </div>
        
    </div><!--/.row-->
  </div><!--/.container-->
</div><!--/.page-container-->

Answer 1

您的代码中存在一些不需要的严重错误 css。

首先，您通过以下方式调用 classes leftActive 和 rightActive;

$('[data-toggle="offcanvas"]').click(function () {
    $('.row-offcanvas-both').toggleClass('leftActive');
});

$('[data-toggle="offcanvas-right"]').click(function () {
    $('.row-offcanvas-both').toggleClass('rightActive');
});

但是在你的 HTML class 中，左右菜单的名称都是 active；

<ul class="nav">
     <li class="active"><a href="#">Home</a></li>
     <li><a href="#">Link 1</a></li>
     <li><a href="#">Link 2</a></li>
     <li><a href="#">Link 3</a></li>              
</ul>

我更正了我在您的代码中发现的所有错误，并为您制作了一个 工作示例 ，您可以在 this Bootply.

中查看

Answer 2

在遇到与您询问的相同问题后，我对 Bootstrap 关闭 canvas 菜单示例进行了多次修复。我真的认为这个错误是提议的，作为对开发人员的使命。

主要内容：

布局：删除：页眉和页脚。
逻辑：已更改：脚本在打开之前关闭其他菜单。
样式：删除：其他所有内容。

Click to check my final version at Codepen

主要

我在主要 canvas 上放置了 2 个按钮，它们仅在小宽度上显示。

在两个关闭的canvas 菜单中：我更改了 offcanvas 菜单中按钮的位置。

左侧菜单

在左侧菜单中：第一个按钮是一个关闭按钮，默认位于左侧类。第二个是 Toggle to Right 按钮，带有箭头“>”，使用 Glyphcons。使用 float:right 定位到右边； .

   <p class="visible-xs">

    <button type="button" class="btn btn-danger btn-lg" data-toggle="offcanvas"> <i class="glyphicon glyphicon-remove"></i> </button>

            <button class="btn btn-lg" type="button" data-toggle="offcanvasRight" style="float:right;">
  Toggle Right
              <i class="glyphicon glyphicon-chevron-right"></i>

              </button>
   
   </p>

我这样更改了按钮，因为：如果用户点击 2 次，菜单将打开和关闭。

右键菜单

右侧菜单与左侧菜单完全相同canvas菜单，相同定位，倒置。

脚本

            $(document).ready(function () {
$('[data-toggle=offcanvas]').click(function() {
  $('.row-offcanvas-left').toggleClass('active');
  $('.row-offcanvas-right').removeClass('active');
});

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

Bootstrap 两侧（左侧和右侧）的 offcanvas 示例

Bootstrap offcanvas example on both (left and right) sides

css

twitter-bootstrap

twitter-bootstrap-3

off-canvas-menu

主要

左侧菜单

右键菜单

脚本