保持切换位置 [英] Keep toggled div in position

问题描述

我使用下面的代码将div切换到左侧和后侧。我有两个问题：

1. 我只能将div切换到最左边的位置一次。一旦我
   已经切换回增益，切换不会再将div移动到其
   最左边的位置。

我正在使用 code>'right'：window.innerWidth - 80 来计算divs
的左边位置。一旦div向左移动，我需要'right'：
window.innerWidth - 80 不会重新计算div的位置。
每次切换到左边时div都需要保留。

  $（document）.ready（function（）{var is_Clicked = false; $（＃togglebutton）。click（function（）{if（is_Clicked） {$（'＃myToggleDiv'）.css（'float'，'left'）; $（＃myToggleDiv）。animate（{left：'0％'}）; is_Clicked = false;} else {$（' （''''''）;}}）;}）;。 $（document）.ready（function（）{document.getElementById（myText）。innerHTML =Lorem Ipsum仅仅是印刷和排版行业的虚拟文本.Lorem Ipsum自从16世纪以来一直是业界标准的虚拟文本，当一个未知的打印呃采取了一个类型的厨房，并把它炒成一个样本书。它不仅存活了五个世纪，而且还实现了电子排版的飞跃，基本保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布以及最近的包括Aldus PageMaker在内的桌面出版软件（包括Lorem Ipsum的版本）而得到普及。< br>< br> Lorem Ipsum简直就是虚拟文本和排版行业。 Lorem Ipsum自从16世纪以来一直是业界标准的虚拟文本，当时一台未知的打印机采用了一种类型的厨房，并将其制作成样本书。它不仅存活了五个世纪，而且还实现了电子排版的飞跃，基本保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset工作表的发布以及最近的包括Aldus PageMaker在内的桌面出版软件（包括Lorem Ipsum版本）的推出而得到了普及。;}）;   {body} {width：100％; height：100％;}＃header {width：100％; height ：20％; float：left; border：1px solid;}＃myToggleDiv {position：absolute; border：1px solid;}＃togglebutton {width：10％; height：40％; margin-right：5px; margin-top： 5px; float：right;} @ media screen and（min-width：1366px）{#myToggleDiv {width：60vw;}} @ media screen and（max-width：1365px）{#myToggleDiv {width：70vw;}} @媒体屏幕和（最大宽度：1024px）{#myToggleDiv {width：90vw;}} @ media screen and（max-width：800px）{#myToggleDiv {width：100vw;}}  pre> 
 < script src =https://ajax.googleapis.com/ajax/libs/jquery / 2.1.1 / jquery.min.js>< / script>< div id =myToggleDiv> < input type =buttonvalue =Toggleid =togglebutton> < p id =myText>< / p>< / div>  

解决方案

我使用css动画和百分比计算，无论窗口大小如何，容器始终位于容器左侧80px。

{body} {width：100％; height：100％;}＃header {width：100％; height ：20％; float：left; border：1px solid;}。hide {transform：translate（calc（-100％+ 80px），0）;}＃myToggleDiv {position：absolute; border：1px solid; transition：transform。 3s;}＃togglebutton {width：10％; height：40％; margin-right：5px; margin-top：5px; float：right;} @ media screen and（min-width：1366px）{#myToggleDiv {width： @ media screen和（max-width：1365px）{#myToggleDiv {width：70vw;}} @ media screen and（max-width：1024px）{#myToggleDiv {width：90vw;}} @ media screen and （max-width：800px）{#myToggleDiv {width：100vw;}}

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script> < div id =myToggleDiv> < input type =buttonvalue =Toggleid =togglebutton> < p id =myText>< / p>< / div>  

I am using the code below to toggle a div to the left and back. I have two problems:

1. I can only toggle the div to its most left position once. Once I have toggled back gain, toggling will not move the div again to its most left position.

2. I am using 'right': window.innerWidth - 80 to calculate the divs left position. Once the div is moved left, I need 'right': window.innerWidth - 80 to not keep recalculating the divs position. The div needs to stay in place each time its toggled to the left.

$(document).ready(function() {
  var is_Clicked = false;
  $("#togglebutton").click(function() {
    if (is_Clicked) {
      $('#myToggleDiv').css('float', 'left');
      $("#myToggleDiv").animate({
        left: '0%'
      });
      is_Clicked = false;
    } else {
      $('#myToggleDiv').css('float', 'right');
      $("#myToggleDiv").animate({
        'right': window.innerWidth - 80
      });
      is_Clicked = true;
    }
  });
});

$(document).ready(function() {
  document.getElementById("myText").innerHTML = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br><br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";
});

html,
body {
  width: 100%;
  height: 100%;
}
#header {
  width: 100%;
  height: 20%;
  float: left;
  border: 1px solid;
}
#myToggleDiv {
  position: absolute;
  border: 1px solid;
}
#togglebutton {
  width: 10%;
  height: 40%;
  margin-right: 5px;
  margin-top: 5px;
  float: right;
}
@media screen and (min-width: 1366px) {
  #myToggleDiv {
    width: 60vw;
  }
}
@media screen and (max-width: 1365px) {
  #myToggleDiv {
    width: 70vw;
  }
}
@media screen and (max-width: 1024px) {
  #myToggleDiv {
    width: 90vw;
  }
}
@media screen and (max-width: 800px) {
  #myToggleDiv {
    width: 100vw;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myToggleDiv">
  <input type="button" value="Toggle" id="togglebutton">
  <p id="myText"></p>
</div>

解决方案

I used css animations and percentage calculations so that the container is always 80px at the left of the container irrespective of window resize.

$(document).ready(function() {
  $("#togglebutton").click(function() {
    var $container = $('#myToggleDiv');
    $container.toggleClass('hide');
  });
});

$(document).ready(function() {
  document.getElementById("myText").innerHTML = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br><br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";
});

html,
body {
  width: 100%;
  height: 100%;
}
#header {
  width: 100%;
  height: 20%;
  float: left;
  border: 1px solid;
}
.hide {
  transform: translate(calc(-100% + 80px), 0);
}
#myToggleDiv {
  position: absolute;
  border: 1px solid;
  transition: transform .3s;
}
#togglebutton {
  width: 10%;
  height: 40%;
  margin-right: 5px;
  margin-top: 5px;
  float: right;
}
@media screen and (min-width: 1366px) {
  #myToggleDiv {
    width: 60vw;
  }
}
@media screen and (max-width: 1365px) {
  #myToggleDiv {
    width: 70vw;
  }
}
@media screen and (max-width: 1024px) {
  #myToggleDiv {
    width: 90vw;
  }
}
@media screen and (max-width: 800px) {
  #myToggleDiv {
    width: 100vw;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myToggleDiv">
  <input type="button" value="Toggle" id="togglebutton">
  <p id="myText"></p>
</div>

这篇关于保持切换位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！