Question

我正在尝试将页面向下滑动，然后另一页向上滑动。但是，出于某种原因，我无法弄明白。

http://maximsiebert.com/unamed/Untitled-1.html

如果您在此处查看，您可以看到，如果我点击About导航链接，页面会向上滑动，如果我再次点击它会向下滑动。与Contact page相同。

问题是，虽然我有About page，但我点击了联系人链接，我需要About page向下滑动，而Contact page向上滑动，反之亦然。但我似乎无法让它发挥作用。

这是我的代码： ps：在“divPages”中我有#aboutpage和#contactpage

 $(document).ready(function() {
 $('.about').click(function() {
    if (!$('#aboutpage').is(":visible")) {
    $('#portfolio').slideUp(1000);
        $('#aboutpage').slideDown(1000);
    }else{
        $('#portfolio').slideDown(1000);
        $('#aboutpage').slideUp(1000);
    }

});

}）;

$(document).ready(function() {
$('.contact').click(function() {
    if (!$('#contactpage').is(":visible")) {
        $('#portfolio').slideUp(1000);
        $('#contactpage').slideDown(1000);
    }else{
        $('#portfolio').slideDown(1000);
        $('#contactpage').slideUp(1000);
    }

});

}）;

$(document).ready(function() {
$('.welcome').click(function() {
    if ($(divPages).is(":visible")) {
        $('#portfolio').slideDown(1000);
        $(divPages).slideUp(1000);
        }else{
        $('html, body').animate({scrollTop:0}, 'slow');
    }

});

}）;

Answer 1

您的关于页面仍在那里但隐藏在某处。我不认为这是你问题的全部内容，但它可能是它的重要组成部分。

在任何slideDown（）之后添加.css（{'z-index'：' - 1'}）;在ans slideUp（）中和之后添加.css（{'z-index'：'100'}）;

$('#about').slideDown(1000).css({'z-index':'-1'});
$('#contact').slideDown(1000).css({'z-index':'100'});

我在交叉淡入淡出的幻灯片放映中表达了与EI相同的问题。另一张照片停留在另一张照片上，所以你很难对它起作用。

希望这有帮助。

编辑：再看看，根据我的萤火虫，大约保持隐藏状态。然后，您还可以检查它是否可见，并在需要时更改显示。

这可以通过.is（'：visible'）实现，如下所示：

if($('#about').is(':visible') == false) $('#about').show();

根据需要重用并更改其他元素的html指针。

Answer 2

我希望在所有绑定了click事件的菜单项中共享一个类。然后，添加一个类来跟踪当前显示的项目。

上次修改将等同于内容div ID的课程.menu-item和数据属性data-content-div添加到菜单li。

<li class="about menu-item" data-content-div="contactpage">about</li>

尝试使用此代码替换您拥有的内容：

$(document).ready(function() {
    $('.menu-item').click(function() {
        if ( $(this).hasClass('menu-active') )
        {
            var contentDiv = $(this).data('content-div');
            $('.menu-active').removeClass('menu-active');
            $('#' + contentDiv).slideDown(1000);
        }
        else if ( $('.menu-active').length )
        {      
            var menuItem = $(this);
            var hideDiv = $('.menu-active').data('content-div');
            $('.menu-active').removeClass('menu-active');
            $('#' + hideDiv).slideDown(500, function() { 
                menuItem.addClass('menu-active');
                $('#' + menuItem.data('content-div') ).slideUp(1000);
            });
        }
        else
        {
            $(this).addClass('menu-active');
            $('#' + $(this).data('content-div') ).slideUp(1000);
        }

    });
});

如果我有你所有的风格，这里有一个fiddle。

if（：visible）向上滑动延迟

2 个答案: