在切换

Question

我有一个崩溃的div，但是当再次点击切换按钮时需要再次展开。 DEMO HERE

$(document).ready(function () {
    $("#toggle").click(function () {
        $("#sidebar").animate({
            left: '-55%'
        });

    });
});

Answer 1

您可以使用此代码 你必须声明一个变量来控制点击按钮

    $(document).ready(function() {
      var is_Clicked = false;
      $("#toggle").click(function() {
        if (is_Clicked) {
          $("#sidebar").animate({
            left: '0'
          });
          is_Clicked = false;
        } else {
          $("#sidebar").animate({
            left: '-55%'
          });
          is_Clicked = true;
        }
      });
    });

html,
body {
  width: 100%;
  height: 100%;
}

#header {
  width: 100%;
  height: 20%;
  float: left;
  border: 1px solid;
}

#sidebar {
  width: 70%;
  height: 80%;
  position: relative;
  border: 1px solid;
}

#toggle {
  width: 10%;
  height: 40%;
  margin-right: 6.5%;
  margin-top: 3.5%;
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="sidebar">

  SIDEBAR
  <input type="button" value="Toggle" id="toggle">
</div>

Answer 2

$(document).ready(function () {
        $("#toggle").click(function () {
        if($(this).hasClass('active')){
        $(this).removeClass('active');
        $("#sidebar").animate({
                left: '0%'
        });
        }else{
        $(this).addClass('active');
        $("#sidebar").animate({
                left: '-55%'
        });
        }


        });
    });

试试这个js代码。

http://jsfiddle.net/100pvu95/3/见这里

Answer 3

我的jquery有点模糊，但你可以用你想要的css属性打开和关闭2个类，然后在.click()事件上切换类

$(document).ready(function () {
$("#toggle").click(function () {
    $("#sidebar").toggleClass("close");

});
});

CSS

.open{
  width: 0px
}
.close{
  width: -70px;
}

请务必在.close class之后声明.open class 因此，当你的div添加到它时，它会覆盖.open class的属性

这样的东西应该可以工作，代码可能需要一些调整，因为我的jQuery上有点生疏，但你去了。