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,以便从右侧打开它?

评论
咕-_-
咕-_-

Use margin-right: -300px; in the rule for .leftbar and margin-right: 0px; in .leftbar.open

点赞
评论