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>

我想要的是，单击“关闭”按钮后它会向后滑动。

Answer 1

您可以使用单个链接功能切换单个按钮和内容。

$('.btn').on('click', function() {...

点击任何类别为.btn的标签...

$(this).toggleClass('hide show')...

切换其类.hide/.show以更改其文本（请参见CSS）

.next('.hidden').animate({width:'toggle'}, 750);

获取类别为.hidden的下一个标签，并将其左右切换

也可以使用类避免#id。在演示类中，使用了该类，它使我们可以仅使用一个功能来控制重复的标签。

$('.btn').on('click', function(e) {
  $(this).toggleClass('show hide').next('.hidden').animate({
    width: 'toggle'
  }, 750);
});

.hidden {
  overflow: hidden;
  display: none;
  height: 30x;
  border: 3px solid black;
}

.btn {
  display: block;
  width: 100px;
}

.hide:before {
  content: 'Hide ';
}

.show:before {
  content: 'Show ';
}

<button class="btn show">Content</button>
<div class="hidden">Content</div>
<button class="btn show">Content</button>
<div class="hidden">Content</div>
<button class="btn show">Content</button>
<div class="hidden">Content</div>
<button class="btn show">Content</button>
<div class="hidden">Content</div>
<button class="btn show">Content</button>
<div class="hidden">Content</div>
<button class="btn show">Content</button>
<div class="hidden">Content</div>
<button class="btn show">Content</button>
<div class="hidden">Content</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

这是一个具有切换和CSS过渡的简单示例。

HTML

<button id="button">Toggle div</button>
<div id="slide" class="transition"></div>

JS

$('button').on('click', function(){
    $('#slide').toggleClass('open');
})

CSS

#slide {
    background: black;
    height: 100px;
    width: 100%;
    position: relative;
    left: -110%;
}

.open {
    left: 0px !important;
}

.transition {
  -webkit-transition: left 0.3s ease-out;
     -moz-transition: left 0.3s ease-out;
       -o-transition: left 0.3s ease-out;
          transition: left 0.3s ease-out;
}

示例：

https://jsfiddle.net/o2xa0wjr/

Answer 3

您似乎在使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>

Answer 4

这是一个非常简单的示例。

有两个示例，Jq和UI选择一个更适合您的

var box = $(".box");
// this is Jq example
$("input").first().click(function() {
    if (box.is(":hidden")) // then show it
        box.show("slow");
    else 
        box.hide("slow");
});

// Jq UI Example using animate
$("input").last().click(function() {
    if (box.is(":hidden")) // then show it
        box.show("slide", { direction: "left" }, 500);
    else 
        box.hide("slide", { direction: "left" }, 500);
});

.box {
    width:90%;
    height:100px;
    background:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<input type="button" value="Jquery only" />

<input type="button" value="Jquery UI" />

<div class="box"></div>

两个按钮可滑动相同的div，但方式不同（从右到左和从左到右）

4 个答案: