返回页面后缺少滑出 div

Question

我制作了 'animated' 带有社交媒体图标的滑出菜单，我将这些图标添加到我按照 Udemy 的教程制作的页面。它在 mouseenter() 上滑出并在 mouseelave() 上滑回。我使用了 animate() 函数。

问题是，当我单击任何将我引导到另一个网站的图标时，当我返回我的浏览器或鼠标按钮时，我的页面加载但菜单丢失。我必须重新加载页面才能再次显示菜单。有什么方法可以修复它，使其无需重新加载页面即可自动显示吗？

非常感谢。

页面已加载：

菜单在 mouseenter() 上打开：

从 facebook 或任何其他网站支持后，整个菜单丢失了：

$(document).ready(function() {
        $('#follow').mouseenter(function() {
            $(this).animate({
                left: "+=49px"
            }, 50);
        });
        $('#follow').mouseleave(function() {
            $(this).animate({
                left: "-=49px"
            }, 50);
        });
        $('#follow').click(function() {
            $(this).animate({
                left: "-=49px"
            }, 0);
        });

    });

#follow {
  position                   : fixed;
  left                       : -50px;
  width                      : 70px;
  float                      : left;
  border-radius              : 0px;
  border-top-right-radius    : 15px;
  border-bottom-right-radius : 15px;
  background-color           : #353535;
}

#follow #follow_id {
  padding-top : 15px;
  list-style: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="final-example">

    <div id="follow">
      <ul id="follow_id">
        <li class=""><a href="https://www.facebook.com/"><img src="img/facebook-logo-button.png" alt="facebook"/></a></li>
        <li class=""><a href="https://twitter.com/?lang=en"><img src="img/twitter-logo-button.png" alt="twitter"/></a></li>
        <li class=""><a href="https://www.instagram.com/"><img src="img/instagram-logo.png" alt="instagram"/></a></li>
      </ul>

    </div>

该片段看起来很糟糕，因为图片丢失并且 alt 显示了我必须修复的内容，但问题是当我点击让我们说 facebook 图标时，它会加载我的 facebook 网站，然后如果我按下我的后退按钮浏览器它让我回到我的页面，但整个滑动菜单都不见了，它甚至根本没有加载到我的页面上。我必须在我的浏览器上单击重新加载才能显示该菜单，然后我才能使用它。

Answer 1

我在演示中使用了您的代码，并且运行良好。我还没有发现任何问题。

请勾选这个。

https://output.jsbin.com/muluyu/1

如果这对您不起作用，则可能是浏览器相关问题。使用后退按钮时，不同的浏览器加载页面的方式不同。有时他们缓存页面，有时他们重新加载页面。我相信还有其他人只是部分重新加载页面。

所以对于 mozilla firefox 后退按钮大多数时候不会刷新页面。因此，#follow 会向左 -90px，每次都会添加 -49。所以添加这一行。

$('#follow').css('left', '-50px');

在document.ready(function () { ..

之后

最终 JS

$(document).ready(function() {
    $('#follow').css('left', '-50px');
    $('#follow').mouseenter(function() {
        $(this).animate({
            left: "+=49px"
        }, 50);
    });
    $('#follow').mouseleave(function() {
        $(this).animate({
            left: "-=49px"
        }, 50);
    });
    $('#follow').click(function() {
        $(this).animate({
            left: "-=49px"
        }, 0);
    });

});

它肯定会起作用。

演示：https://output.jsbin.com/muluyu/2

返回页面后缺少滑出 div

Missing slide out div after backing to the page

html

javascript

css

jquery

reload