Javascript 防止div元素在切换其他元素时移动？

正如你在这里看到的：， 开始时，on/off按钮高于其正常位置。我知道这是因为在加载文档时隐藏了其他div元素，但如何解决这个移动问题呢

谢谢

$(document).ready(function() {

$(".tog").css({"display":"none"});


$(".onoff").click(function(){
$(".button1").fadeToggle();
$(".button2").fadeToggle();
$(".button3").fadeToggle();
$(".button4").fadeToggle();


});

});

您可以添加以下内容：

.row {
    min-height:170px;
}

---

问题是，您在

display:none

和

display:block

之间切换。如果元素具有

显示：无

，则该元素所需的空间不会被分配。您可以使用

opacity:0

使元素不可见，但仍需要空间，然后切换其可见性，如下所示：

$(".tog").animate({"opacity": !($(".tog").css("opacity") > 0)}, 500);

如果您希望类为

.tog

的对象从一开始就不可见，请在css中设置：

.tog{
    opacity: 0;
}

---

您可以使用不透明度进行切换：

我也简化了你的代码

$（“.tog”）.animate（{'opacity'：0}）

位置：绝对
？将其位置设置为绝对位置或固定位置。这就成功了！谢谢。但是我现在有另一个问题。我想切换开/关按钮，但我无法用我在网上看到的方法实现这一点。当我单击两次时，我应该如何使gylphicon元素返回？@ahgk在设置按钮内容时使用此行：
$（.buttonb”）.html（$（.buttonb”）.children（“span.glyphicon”）.length？“John Doe”：“）@ahgk我稍微更改了动画功能，因为我刚刚注意到快速点击按钮两次会破坏动画。这样比较好