javascript - 两个用于滑动相同 div 但方式不同的按钮(从右到左和从左到右)

Question

我只需要使用两个按钮将 div 从右向左滑动并向后滑动。

我提供了一段代码，但是div正常只在点击buttonStart时滑动，点击buttonClose时不滑动。

//custom code start
$(function() {
  $('.showButton').click(function() {
    $('.hidden').show();
    $('.show').hide();
  });
  $('.hideButton').click(function() {
    $('.hidden').hide();
    $('.show').show();
  });
});
$(document).ready(function() {
  //localStorage.removeItem('show'); //to unset an item
  var show = sessionStorage.getItem('show');
  if (show === 'true') {
    $('#content101').show();
  }

  $("#buttonStart").click(function(event) {
    event.preventDefault();
    $('#content101').show();
    sessionStorage.setItem('show', 'true');
  });
  if (document.querySelector("#content101").style.display == "block") {
    $("#buttonStart").hide();
    $("#buttonClose").show();
  } else {
    $("#buttonStart").show();
    $("#buttonClose").hide();
  }
});

$("#buttonStart").click(function() {
  {
    $("#content101").toggle("slide");
  }
});
$("#buttonClose").click(function() {
  {
    $("#content101").toggle("slide");
  }
});
//custom code end

#content101 {
  float: right;
  overflow: hidden;
  margin: 0;
  display: none;
  position: absolute;
  right: 0px;
  top: 60px;
  width: 740px;
  padding: 0px;
  background: #ffffff;
}

.hidden {
  display: none;
}

.show {
  display: block;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<button id="buttonStart" class="showButton show">Show div</button>
<button id="buttonClose" class="hideButton hidden">Hide div</button>
<div id="content101" class="hidden">Content</div>

我想要，在点击 buttonClose 之后它会滑回来。

Answer 1

您似乎使 jquery 过于复杂了。您绝对可以将其简化为一个简单的函数。在css中隐藏一个按钮(取决于你希望它在开始时是隐藏还是可见)

查看示例片段:

$("#buttonStart").click(function() {
  {
    $("#content101").toggle("slide");
    $('#buttonStart').hide();
    $('#buttonClose').show();
  }
});
$("#buttonClose").click(function() {
  {
    $("#content101").toggle("slide");
    $('#buttonStart').show();
    $('#buttonClose').hide();
  }
});

#content101 {
  display: block;
  float: left;
  height: 100px;
  overflow: hidden;
  background: #f0e68c;
  width: 100%;
}

button {
  margin-top: 110px;
  position: relative;
  display: block;
}

#buttonStart {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content101">
  <p>
    I want this to slide open and close
  </p>
</div>
<br>
<button id="buttonStart">
Show
</button>

<button id="buttonClose">
Hide
</button>