时间戳

首页 > 解决方案 > Css / Jquery 切换左栏以从右侧而不是左侧打开

javascript - Css / Jquery 切换左栏以从右侧而不是左侧打开

问题描述

我有这个 css 从左边切换左栏（因为它是不应该做的）

$('#toggleleft').on('click', function(e) {
    e.preventDefault();
    $('.leftbar').toggleClass('open');
  }
);
.wrapper {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  height: 100%;
  width: 100%;
  background: blue;
  margin: auto;
  overflow: hidden;
}

.leftbar {
  position: relative;
  background: green;
  width: 300px;
  -webkit-transition-duration: .3s;
  transition-duration: .3s;
  margin-left: -300px;
  -webkit-border-top-left-radius: 4px;
  -webkit-border-bottom-left-radius: 4px;
  -moz-border-radius-topleft: 4px;
  -moz-border-radius-bottomleft: 4px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.leftbar.open {
  margin-left: 0;
}

.content {
  background: red;
  min-width: 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="leftbar"></div>
  <div class="content">
    <a id="toggleleft" href="#">toggle left</a>
  </div>
</div>

正如您所看到的，它是一个工作代码，但我需要修改 css 所以......我的问题是，如何更改 css 以便它从右侧打开？

标签： javascripthtmljquerycss

解决方案

margin-right: -300px;在规则中使用for.leftbar和margin-right: 0px;in.leftbar.open

推荐阅读