2

我正在尝试使bootstrap offcanvas 示例对双方都有效。到目前为止，我设法让它在两侧滑动，但由于某种原因我对 css 不太擅长，因此菜单不在应有的位置。bootply 中有非常相似的模板，所以这里是我在这里的非常相似的示例

$(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-->

4

2 回答 2

3

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

首先，您正在调用课程leftActive并rightActive通过；

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

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

但是在您的HTML类名中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>

我纠正了我在您的代码中发现的所有错误，并为您制作了一个工作示例，您可以在此 Bootply中看到。

于 2016-07-11T13:48:21.720 回答
0

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

主要内容：

  • 布局：删除：页眉和页脚。
  • 逻辑：更改：脚本在打开之前关闭其他菜单。
  • 风格：删除：其他一切。

点击查看我在 Codepen 的最终版本

主要的

在此处输入图像描述 我在主画布上放置了 2 个按钮，它们仅显示在小宽度上。

在两个 offcanvas 菜单内：我更改了 offcanvas 菜单内按钮的位置。

左侧菜单

在此处输入图像描述

左侧菜单：第一个按钮是关闭按钮，默认位于左侧。第二个是使用 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 次，菜单将打开和关闭。

右菜单

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

脚本

            $(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');
});
        });
于 2022-01-17T05:30:26.537 回答