javascript - 切换脚本和不起作用的按钮

Question

我意识到围绕切换脚本有数百个线程，我已经搜索了一个多星期。我确实使用了一个，它有效但只是部分有效。它确实切换隐藏和显示在它应该的对象上，但按钮是这里的主要问题，至少我认为是!我希望按钮始终保持在页面底部，或者在没有打开切换按钮时处于向下状态，并在单击打开时跟随切换按钮向上移动。

现在按钮在开关关闭时位于顶部，在开关打开时位于底部。

这是我目前正在使用的脚本

<script>
    var toggle = function() {
    var mydiv = document.getElementById('toggle-footer');
        if (mydiv.style.display === 'block' || mydiv.style.display === '')
            mydiv.style.display = 'none';
        else
            mydiv.style.display = 'block'
                            }
</script>

这是切换按钮

<center><div type="submit" class="togglebtn" onclick="toggle();">Meny</div></center>

所有这些都是为了切换这部分。显示:无；在那里，因为否则我想切换的部分从一开始就在那里，而我希望它从一开始就被隐藏。

<div id="toggle-footer" style="display:none;"> <!-- Beginning toggle-footer -->
<div class="container"> <!-- Beginning container -->
and some content in here
</div> <!-- End container-->
</div> <!-- End band-toggle -->

如果有任何用处，请提供按钮本身的 CSS 代码。我试图修复它，但这不起作用。当我将按钮放在切换 div 上方时，它会保持不动，但这也意味着当我希望它位于底部时，它仍位于页面顶部。

CSS

.togglebtn {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
-webkit-border-top-left-radius:15px;
-moz-border-radius-topleft:15px;
border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
-moz-border-radius-topright:15px;
border-top-right-radius:15px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0;
border:1px solid #dcdcdc;
display:inline-block;
color:#777777;
font-family:Arial;
font-size:15px;
font-weight:normal;
font-style:normal;
height:23px;
line-height:23px;
width:75px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #ffffff;
position: static;
bottom: 0xp;

}
.togglebtn:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
background-color:#dfdfdf;
}.togglebtn:active {
position:relative;
top:1px;

我做错了什么，或者是否有其他解决方案可以解决我的问题。我是这方面的初学者，我所知道的都是自学的。好吧，我还是希望一切顺利，感谢您花时间阅读本文。

Answer 1

如果您希望按钮保持稳定，请将其位置从 static 更改为 absolute 或 fixed。

position:static 元素在页面的正常流动中，因此当页面布局发生变化时它可能会改变位置。

position:fixed 元素相对于窗口定位。即使您滚动页面，fixed 定位的元素也会留在原处。

absolute 定位的元素将相对于位置不是 static

的第一个父元素定位