jQuery .animate({scrollTop：. })

Question

我有一个.html文件

我有<ul>菜单，<li>有数据id属性。我有几个内容项，它们的id与菜单<li>的data-id相同。默认情况下，大多数内容项都是display:none;首页内容display:block;。

<ul>
    <li class="menuLink" id="onepage" data-id="one"></li>
    <li class="menuLink" id="twopage" data-id="two"></li>
    <li class="menuLink" id="threepage" data-id="three"></li>
    <li class="menuLink" id="fourpage" data-id="four"></li>
</ul>
<div class="content">
    <div id="one" class="page">...</div>
    <div id="two" class="page">...</div>
    <div id="three" class="page">...</div>
    <div id="four" class="page">...</div>
</div>

此脚本应通过单击菜单项显示并消失内容项。这个效果很好。

$('li.menuLink').click(function () {
    var elem = $(this);
    if (elem.hasClass('active')) {
    } else {
        $('li.active').removeClass('active');
        elem.addClass('active');
        $('#' + elem.attr('data-id')).prependTo($('.content'));
        var existing = $('.page:visible');
        (existing) ? existing.fadeOut(1) : '';
        $('#' + elem.attr('data-id')).delay(10).fadeIn(400);

        if (($('.body-wrapper').width()) <= 700) {
            $('html,body').animate({scrollTop: $('#' + elem.attr('data-id')).offset().top}, 500);
        }
    }
});

如果.body-wrapper宽度小于700 (移动设备)，这个脚本也应该向下滚动到内容，但是这个功能根本不起作用。一旦刷新页面并单击第一个菜单元素，它就会工作一次。之后..。没什么。

if (($('.body-wrapper').width()) <= 700) {
            $('html,body').animate({scrollTop: $('#' + elem.attr('data-id')).offset().top}, 500);
        }

编辑： http://jsfiddle.net/wBUS7/2/

Answer 1

您应该使用each()函数。喜欢

$('li.menuLink').each(function(){
    $(this).click(function () {
        var elem = $(this);
        if (elem.hasClass('active')) {
        } else {
            $('li.active').removeClass('active');
            elem.addClass('active');
            $('#' + elem.attr('data-id')).prependTo($('.content'));
            var existing = $('.page:visible');
            (existing) ? existing.fadeOut(1) : '';
            $('#' + elem.attr('data-id')).fadeIn(400);

            if (($('.body-wrapper').width()) <= 700) {
                $('html,body').animate({scrollTop: $('#' + elem.attr('data-id')).offset().top}, 500);
            }
        }
    });
});