保持切换div位置

时间：2016-10-04 10:19:50

标签： javascript jquery html css

我正在使用以下代码向左侧和后侧切换div。我有两个问题：

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

  2. 我正在使用'right': window.innerWidth - 80来计算div     左侧位置。一旦div向左移动，我需要'right': window.innerWidth - 80不要重新计算div的位置。     div每次切换到左侧时都需要保持原位。

    3. $(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>

4 个答案:

答案 0 :(得分：1)

你有2个错误

  1. 您需要同时更改正确尺寸
    2. 的时间
  2. 无需设置浮动 css规则

    3. $(document).ready(function() {
  var is_Clicked = false;
  $("#togglebutton").click(function() {
    if (is_Clicked) {
      // $('#myToggleDiv').css('float', 'left'); <-- NO need 
      $("#myToggleDiv").animate({
        'right': '0%' // <-- modifying right 
      });
      is_Clicked = false;
    } else {
     // $('#myToggleDiv').css('float', 'none'); <-- NO need 
      $("#myToggleDiv").animate({
        'right': window.innerWidth - 80 // <-- modifying right 
      });
      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>

答案 1 :(得分：1)

我使用了css动画和百分比计算，因此无论窗口大小调整，容器在容器的左侧始终为80px。

$(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>

答案 2 :(得分：0)

不要使用left＆amp;同时right。您只能使用right来获得结果。

<强>样本：

＆＃13;
＆＃13; 
$(document).ready(function() {
  var is_Clicked = false;
  $("#togglebutton").click(function() {
    if (is_Clicked) {
      $('#myToggleDiv').css('float', 'left');
      $("#myToggleDiv").animate({
        right: 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.";
});
＆＃13; 
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;
  }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

请在'left' : '0%'条件下使用'right' : '0%'，而不是if。您必须使用left或right。在你的情况下，使用同一时间会很麻烦。

请查看下面的代码段。

＆＃13;
＆＃13; 
$(document).ready(function() {
  var is_Clicked = false;
  $("#togglebutton").click(function() {
    if (is_Clicked) {
      $('#myToggleDiv').css('float', 'left');
      $("#myToggleDiv").animate({
        'right': '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.";
});
＆＃13; 
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;
  }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题