Question

我制作了带有社交媒体图标的'动画'幻灯片菜单，我添加到了我按照Udemy的教程制作的页面。它在mouseenter（）上滑出并在mouseeleave（）上滑回。我使用了animate（）函数。

问题是当我点击导致我到另一个网站的任何图标时，当我点击我的浏览器或鼠标按钮时，我的页面加载但菜单丢失。我必须重新加载页面以便再次显示菜单。有没有办法解决它，所以它自动显示而不重新加载页面？

非常感谢。

页面加载：

在mouseenter（）上打开菜单：

从Facebook或其他任何人支持后，Wole菜单丢失了：

$(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网站，然后如果我在我的浏览器上按回按钮它让我回到我的页面但是整个滑动菜单都丢失了，它甚至都没有加载到我的页面上。我必须点击我的broswer上的重新加载才能显示该菜单，然后才能使用它。

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

1 个答案: