我有一个 .html 文件
我有<ul>
menu 和<li>
's 有 data-id 属性。我有几个内容项,它们的 id 与 menu<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(移动设备),此脚本也应该向下滚动到内容,但此功能根本不起作用。刷新页面并单击 FIRST 菜单元素后,它会运行一次。之后……什么都没有。
if (($('.body-wrapper').width()) <= 700) {
$('html,body').animate({scrollTop: $('#' + elem.attr('data-id')).offset().top}, 500);
}
编辑:http: //jsfiddle.net/wBUS7/2/