jquery - 如何在菜单中制作 Bootstrap 4 幻灯片推送内容 offcanvas？

Question

我一直在尝试在菜单中进行从右到左的滑动，当它滑入时也会推动画布的内容。我该怎么做？

这是代码。它在移动设备上从右向左滑动菜单，但我无法弄清楚如何让它也推送内容，而不是出现错误。

@media (max-width: 768px) {
  .navbar-collapse {
    position: absolute;
    top: 54px;
    left: 1%;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    width: 100%;
    transition: all 0.3s ease-in;
  }
  .navbar-collapse.collapsing {
    height: auto !important;
    transition: all 0.2s ease;
    left: 100%;
  }
  .navbar-collapse.show {
    left: 50%;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
  <a class="navbar-brand" href="">Brand</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
  	<span class="navbar-toggler-icon"></span>
  	</button>
  <div class="collapse navbar-collapse bg-dark" id="navbarCollapse">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
    <form class="form-inline mt-2 mt-md-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec tempor dolor, ut varius magna. Cras a dui vitae massa interdum varius. Donec sit amet risus ullamcorper, congue purus nec, vulputate nunc. Integer cursus molestie metus, sit amet rutrum
  est feugiat vel. Praesent congue turpis a ullamcorper mattis. In commodo, mi convallis tristique vestibulum, massa lacus efficitur tortor, accumsan vehicula nunc ipsum id metus. Aenean vulputate nulla aliquet diam auctor, in tristique augue efficitur.
  Cras accumsan est nisi, vitae consectetur eros egestas ac. Vestibulum id imperdiet odio, in pellentesque nunc. Duis nunc lorem, sollicitudin nec mauris a, consequat posuere tellus. Nam in lobortis arcu. Suspendisse sodales aliquet tempus. Nam ut libero
  iaculis risus laoreet tincidunt. Pellentesque sodales nibh sit amet tincidunt auctor.</p>

<p>Nulla vulputate scelerisque felis, non varius tortor luctus ut. Phasellus quis feugiat est. In eleifend consequat ex in cursus. Quisque sodales dolor vel maximus ullamcorper. Cras mollis turpis ut risus accumsan, ac ornare quam elementum. Curabitur faucibus
  nulla sed mi blandit, et ultrices sem porttitor. Proin quis malesuada turpis, quis cursus nisl. Morbi auctor ante ut efficitur imperdiet.</p>

编辑:如果其他人需要这个，我最终使用了以下 jQuery:

<script>
    $('button-class').on('click', function() {
      $(this).children().toggleClass('active');
      $('#sidebar').toggleClass('active');
      $('#content').toggleClass('active-content');
    });
    </script>

并且刚刚添加了事件类，比如

#sidebar.active {
  //styles here
}

#content.active-content {
  //styles here
}

Answer 1

我会建议你看看这个 link 因为有很多替代品可供使用。

在这里你可以看到它在JS中使用了这个函数

function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft= "0";
}

在这种情况下，由于您是从右到左进行的，因此可以使用 style.marginRight。此外，您可以根据您设置的内容调整宽度像素。希望这会有所帮助。