0

我真的很喜欢后退。我几乎从不使用 javascript 或 jquery，但是当我这样做时，我喜欢提供后备。如果您的浏览器中没有 javascript，您现在甚至无法在某些网站上导航。一些开发人员认为这是理所当然的，如果它不存在，您将无法导航或访问内容。甚至 Twitter Bootstrap 也没有提供后备功能。如果禁用 javascript，移动菜单将不会显示或展开。

我正在使用 jquery 的 .toggle 函数来显示和隐藏我的移动菜单。我将菜单的容器设置为display: none; 在我的 CSS 中，以便在您第一次访问我的网站时隐藏菜单。我想要它，所以如果 javascript 被禁用或浏览器中不存在，菜单容器就会简单地显示。

我意识到 99% 的时间 js 很可能会出现并启用。我仍然想这样做。所以这是我的代码。

html/js

    <header>
    <div id="click">Toggle</div>
</header>

<div id="mobilemenu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Random</a></li>
        <li><a href="#">Submit</a></li>
    </ul>

</div>

<script>
    var flip = 0;
    $("#click").click(function () {
    $("#mobilemenu").toggle();
    });
</script>

css

    /* header */
header {
    background: #2e97de;
    width: 100%;
    height: 45px;
    border-bottom: #287eb9 1px solid;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    display: block;
}

/* mobile menu */
#mobilemenu {
    border-top: #8dc8f2 1px solid;
    min-width: 100%;
    background: #2e97de;
    display: none;
}

#mobilemenu ul {

}

#mobilemenu li {
    display: block;
}

#mobilemenu li a {
    padding: 10px;
    color: #95d3ff;
    display: block;
    text-decoration: none;
}

如您所见，我的菜单是一个简单的无序列表，在 div 中包含三个列表项。如果 js 未启用或不存在，我想做的是允许 div #mobilemenu可见。但是，如果启用或存在 js，我希望不显示 #mobilemenu。

如果有任何反馈告诉我如何加强处理切换的 jquery，我也将不胜感激。

4

4 回答 4

2

我会保持可见，然后用 jQuery 隐藏它

$("#mobilemenu").css("display","none");

这种方式只有在启用 Javascript 时才会隐藏

于 2013-09-01T20:27:45.747 回答
0

删除 mobilemenu 样式定义中的 display 属性并用 javascript 隐藏它。

$('#mobilemenu').toggle();
于 2013-09-01T20:32:41.413 回答
0

对于更具声明性的方法，我建议使用一个 CSS 类，将您添加到指示 JS 可用的 body 标记中。然后，如果 JS 存在或不存在，您可以使用该类对页面的任何部分进行不同的样式设置。

<style>
#mobilemenu { display: none }
.withjs #mobilemenu {
    display: block;
}
</style>

<body class="nojs">
...
<script>
$('body').removeClass('nojs').addClass('withjs')
</script>
于 2013-09-01T20:35:52.007 回答
0

你可以有两个样式表。相应地加载它们：

<link rel="stylesheet" href="jsdisabled.css" />
<script type="text/javascript">
    document.write('<link rel="stylesheet" href="jsenabled.css" />');
</script>
于 2013-09-01T20:40:24.420 回答