javascript - 单击时将 div 滑入和滑出，但原始页面未在页面加载时显示？

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 演示了我的意思。