Question

我目前正在为我工作的机构开发一个新网站，可在此处找到：

http://www.astwood.co.uk/testsite/wordpress/

在右上角有两个按钮，可以为联系人和我们的各个部分下载额外的内容。我使用以下jQuery动画了额外div的外观：

在加载页面上隐藏内容：

$("#about").hide();
$("#contact").hide();

单击指定类的链接时显示和隐藏内容：

$(".aboutbtn").click(function () {
   $('#contact').slideUp(
   function() {

        $('#about').slideToggle('slow');

   });
});

$(".contactbtn").click(function () {
   $('#about').slideUp(
   function() {

        $('#contact').slideToggle('slow');

   });
});

这在大多数浏览器中都能很好地工作，它会隐藏现有的open div（如果有的话），然后打开指定的部分。但是，在chrome for mac中，第一次在页面加载后按下一个按钮，它将向下滑动所请求的内容并立即将其重新滑回。

任何帮助将不胜感激。提前谢谢。

Answer 1

$("#about").hide();和$("#contact").hide();有可能在Chrome浏览器中运行较晚（似乎在我的电脑上使用chrome工作正常......）。

尝试在元素上放置display:none的css样式，而不是使用jQuery来隐藏它们。这意味着当浏览器呈现它们时（在javascript运行之前）它们将被隐藏。

Answer 2

两个想法：

自己编排切换操作，而不是依靠.slideToggle();
在向上/向下滑动之前对请求的元素发出.stop(true,true)

这些中的一个或另外一个可能具有正确的效果，但很难知道原因。

以下是两个想法的代码：

$(".aboutbtn").click(function() {
    var $about = $("#about").stop(true,true);
    $("#contact").slideUp(function() {
        var fn = ($about.is(":hidden")) ? 'slideDown' : 'slideUp';
        $about[fn]('slow');
    });
});

Answer 3

好的，事实证明这是一个浏览器插件，干扰了jQuery应该如何工作。有问题的浏览器扩展程序是双击，可在此处找到：

https://chrome.google.com/webstore/detail/double-click/mdoabndnbhmbbiggngmjbnoijnhfophe

Answer 4

只需将clear：都添加到要应用slideToggle（）

的div /容器中

动画需要隐藏溢出，并且无法正确获得高度。

对我来说很清楚：两者都是。

jQuery幻灯片功能在Google Chrome浏览器中运行

4 个答案: