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

how to tell css what to do if javascript is not present

本文关键字：css 何告诉 javascript 不存在 如果      更新时间：2023-09-26

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

我正在使用jquery的.thoggle函数来显示和隐藏我的移动菜单。我将菜单的容器设置为显示：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处理切换。

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

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

这样，只有在启用了Javascript的情况下才会隐藏

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

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

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

<style>
#mobilemenu { display: none }
.withjs #mobilemenu {
    display: block;
}
</style>
<body class="nojs">
...
<script>
$('body').removeClass('nojs').addClass('withjs')
</script>

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

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