jquery - 切换不保持事件状态

Question

我有两个 slider 菜单，左侧和右侧，只有右侧在单击时保持事件值。左侧菜单仅在按住切换按钮时滑出，我需要在单击切换按钮时滑动，而不仅仅是按住。

$('.leftToggle').on('click', function(e) {
  $(".sidebarleft").toggleClass("sidebarleftactive");
});

/*sidebar left*/

.sidebarleft {
  position: absolute;
  padding-top: 0px;
  left: auto;
  top: 7vw;
  height: 80%;
  right: 25%;
  width: calc(50% + 20px);
  background-color: #2E3192;
  border-color: #2E3192;
  border-style: solid;
  border-width: 5px;
  padding-right: 20px;
  padding-left: 5px;
  -webkit-transition: all 1s;
}
.sidebarleft:active {
  right: 70%;
  width: 25%;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebarleft" id="sideleft">
  <div class="lefttext">
    <div class="leftTitle">title</div>

    <div class="leftToggle">+</div>

    <div class="leftSubHead">subheading</div>

    <div class="leftInformation">
      <br />

      <div>
        <br>text
        <br />
        <form></form>
      </div>
    </div>
  </div>
</div>

Answer 1

修复你的 CSS:

.sidebarleft:active {

成为:

.sidebarleftactive {

fiddle :https://jsfiddle.net/lmgonzalves/npgug376/