Question

我有单个.html文件

我有<ul>菜单，<li>有数据ID属性。我有几个内容项，其ID与菜单<li>＆{39} 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（移动设备），此脚本也应向下滚动到内容，但此功能根本不起作用。刷新页面并单击FIRST菜单元素后，它将运行一次。之后......没什么。

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);
            }
        }
    });
});

jQuery .animate（{scrollTop：...}）无效

1 个答案: