Question

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

我正在使用jquery的.toggle功能来显示和隐藏我的移动菜单。我的菜单容器在我的css中设置为 display：none; ，以便在您第一次访问我的网站时隐藏菜单。我希望如此，如果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;
}

正如你所看到的，我的菜单很简单，是一个无序列表，里面有三个列表项。我想做的是，如果没有启用或存在js，则允许div #mobilemenu 可见。但如果启用或存在js，我希望#mobilemenu不显示。

我也很感激任何反馈，告诉我如何加强处理切换的jquery。

Answer 1

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

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

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

Answer 2

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

$('#mobilemenu').toggle();

Answer 3

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

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

<body class="nojs">
...
<script>
$('body').removeClass('nojs').addClass('withjs')
</script>

Answer 4

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

<link rel="stylesheet" href="jsdisabled.css" />
<script type="text/javascript">
    document.write('<link rel="stylesheet" href="jsenabled.css" />');
</script>

如果javascript不存在，如何告诉css该怎么做

4 个答案: