Question

不确定我在这里做了什么，但我正试图移动我的左侧导航和屏幕。正如您在页面加载中看到的那样（下面的链接），导航没有显示，但是一旦您点击菜单图标，事情就会开始移动。虽然直到你点击两个图标才能正常工作。

的Javascript

var boxes = $('ul.topLevelNavigation');
$(document).ready(function () {
    $('.button').click(function (e) {
        e.preventDefault();
        var box = $($(this).attr('href'));
        if (!box.hasClass("topLevelNavigation")) {
            var current = $('ul.topLevelNavigation');
            current.stop().animate({
                left: '-25%',
            }, 500).removeClass('topLevelNavigation');
            box.stop().animate({
                left: '25%',
            }, 500).addClass('topLevelNavigation');
        }
    });
});

指向网站http://keithfrenchdesigns.com/RunwayMag/index.html

的链接

提前感谢您提供任何帮助

Answer 1

您的导航未在页面加载时显示，因为您依赖JavaScript来隐藏和显示它，但您的JavaScript仅在单击导航按钮时触发，而不是在页面加载时触发。你可以做两件事之一来解决这个问题。

让JavaScript在页面加载时隐藏导航 - 在left: -25%或topLevelNavigation1上设置topLevelNavigation2，具体取决于您要在页面加载时显示的内容。
默认情况下使用CSS隐藏导航 - 默认情况下，通过类添加left: -25% HTML（确保您想要在显示时删除使用JavaScript的类）它）或只是添加内联样式<ul class="topLevelNavigation2" style="left: -25%">。

第二种方法绝对是更受欢迎的方法，因为您不依赖JavaScript来加载网站的初始状态，并且您不必等到DOM准备好隐藏导航（可能具有导航功能）显示然后无缘无故地消失。）

无论您使用哪种方法，您还需要将topLevelNavigation类添加到显示为默认的导航中。

编辑：Here's一个jsfiddle，展示了我的意思。

单击滑动div进出，但原始页面加载时没有显示？

1 个答案: