jQuery+；Modernizer-如果禁用javascript，是否不显示div？（见守则）_Javascript_Jquery_Detection

jQuery+；Modernizer-如果禁用javascript，是否不显示div？（见守则）

javascript jquery

jQuery+；Modernizer-如果禁用javascript，是否不显示div？（见守则）,javascript,jquery,detection,Javascript,Jquery,Detection,我试图通过使用jQuery手风琴插件来增强我网站的菜单：这工作非常好，我认为这是一个伟大的插件，利用。。。然而，我注意到，为了实现这些结果，它需要一个特定的布局： <div id="accordion"> <h3>Section 1</h3> <div> <p> ETC... </p> </div> NB: repeate

我试图通过使用jQuery手风琴插件来增强我网站的菜单：

这工作非常好，我认为这是一个伟大的插件，利用。。。然而，我注意到，为了实现这些结果，它需要一个特定的布局：

<div id="accordion">
    <h3>Section 1</h3>
    <div>
        <p>
            ETC...
        </p>
    </div>
    NB: repeated for every result
</div>

因此，我想做的是，为禁用javascript的用户提供一种替代的导航方式（旧的菜单功能齐全，可以正常工作）

我目前在modernizer中使用了几个选项：

为了增加浏览器对我使用的一些CSS属性的支持。我知道它可以通过在body标记中添加类“js”来检测是否启用了javascript

因此，我决定尝试将旧菜单包装在包含div中，将新菜单包装在包含div中

在我继续之前，我真的只是在猜测，所以如果我走错了方向。。。如果有人能给我指出正确的方向，我将不胜感激。我发现了一篇关于stackoverflow的文章，与此相关：

由于我对jQuery的了解非常有限，我对它进行了一些调整，以符合我希望实现的目标：

<script type="text/javascript">
$(document).ready(function(){ // Use jQuery!
    // Remove the no-js and add the js (because JS is enabled (were using it!!)
    $("body").removeClass("no-js").addClass("js");
})
// Put it in a var so you dont traverse the DOM unnecessarily.
var useJS = $("body").hasClass("js");
if(useJS){ // true or false if <body> has class JS.
    // JS Enabled
    $("#oldMenu").css("display", "none");
    $("#newMenu").css("display", "inline");
} else {
    // JS NOT enabled
    $("#newMenu").css("display", "none");
    $("#oldMenu").css("display", "inline");
}
</script>


$（文档）.ready（函数（）{//使用jQuery！
//删除无js并添加js（因为js已启用（我们正在使用它！！）
$（“body”）.removeClass（“no js”）.addClass（“js”）；
})
//将它放在一个var中，这样就不会不必要地遍历DOM。
var useJS=$（“body”）.hasClass（“js”）；
if（useJS）{//true或false，如果有类JS。
//启用JS
$（“#oldMenu”）.css（“显示”、“无”）；
$（“#newMenu”）.css（“显示”、“内联”）；
}否则{
//JS未启用
$（“#newMenu”）.css（“显示”、“无”）；
$（“#oldMenu”）.css（“显示”、“内联”）；
}

现在我面临的问题是，我似乎无法让这个脚本注册或产生任何可见的差异。当我查看源代码中的body标记时，body标记上没有类。菜单没有像我所想的那样触发，我现在已经过了一段时间…非常困惑

如果有人能为我提供一些帮助、建议、信息或指示，帮助我解决当前的问题，我将非常非常感谢

感谢您抽出时间通读我的台词故事！：）

编辑：

@RomainPaulus提出了这一点，它起了作用：

<script type="text/javascript">
$(document).ready(function(){ // Use jQuery!
    // Remove the no-js and add the js (because JS is enabled (were using it!!)
    $("body").removeClass("no-js").addClass("js");
    // Put it in a var so you dont traverse the DOM unnecessarily.
    var useJS = $("body").hasClass("js");
    if(useJS){ // true or false if <body> has class JS.
        // JS Enabled
        $("#oldMenu").css("display", "none");
        $("#newMenu").css("display", "inline");
    } else {
        // JS NOT enabled
        $("#newMenu").css("display", "none");
        $("#oldMenu").css("display", "inline");
    }
})
</script>


$（文档）.ready（函数（）{//使用jQuery！
//删除无js并添加js（因为js已启用（我们正在使用它！！）
$（“body”）.removeClass（“no js”）.addClass（“js”）；
//将它放在一个var中，这样就不会不必要地遍历DOM。
var useJS=$（“body”）.hasClass（“js”）；
if（useJS）{//true或false，如果有类JS。
//启用JS
$（“#oldMenu”）.css（“显示”、“无”）；
$（“#newMenu”）.css（“显示”、“内联”）；
}否则{
//JS未启用
$（“#newMenu”）.css（“显示”、“无”）；
$（“#oldMenu”）.css（“显示”、“内联”）；
}
})

您在这里面临的问题是，显然，当Javascript未启用时，您的Javascript没有执行

您需要的是在默认情况下使用CSS隐藏DIV。然后，当页面加载时，通过JS显示它

Javascript disabled=>Div保持隐藏，因为没有执行任何代码
Javascript enabled=>div在加载时是隐藏的，但是脚本显示了它

此外，如果禁用了Javascript，Modernizer也不会有帮助，因为它是一个Javascript库。

您在这里面临的问题是，显然，当Javascript未启用时，您的Javascript没有执行

您需要的是在默认情况下使用CSS隐藏DIV。然后，当页面加载时，通过JS显示它

Javascript disabled=>Div保持隐藏，因为没有执行任何代码
Javascript enabled=>div在加载时是隐藏的，但是脚本显示了它

另外，如果禁用Javascript，Modernizer也不会有帮助，因为它是一个Javascript库。

Kenneth的回答解释了很多，但我注意到了其他一些东西。您的代码

var useJS = $("body").hasClass("js");

被执行之前

$(document).ready(function(){ // Use jQuery!
    // Remove the no-js and add the js (because JS is enabled (were using it!!)
     $("body").removeClass("no-js").addClass("js");
})

您应该将所有内容放入

$（document.ready（function（）{…}）

所以我想这就是为什么你的代码不起作用的原因。

Kenneth的回答解释了很多，但我注意到了另外一点。你的代码

var useJS = $("body").hasClass("js");

被执行之前

$(document).ready(function(){ // Use jQuery!
    // Remove the no-js and add the js (because JS is enabled (were using it!!)
     $("body").removeClass("no-js").addClass("js");
})

您应该将所有内容放入

$（document.ready（function（）{…}）

所以我想这就解释了为什么你的代码不起作用。

嘿，谢谢你的回复。不过我已经启用了javascript，我脑海中的菜单应该消失了（我已经取出了新菜单的代码）。我很感谢大家对CSS添加的意见，因为我没有想到这一点，我本来打算使用noscript标记作为“故障保护”。我真的很感谢关于CSS的建议，我认为这确实是一个很好的添加，绝对值得投几票，因为这不是我在《s之夜》中看到的内容通过谷歌浏览。谢谢！！嘿，谢谢你的回复。不过我已经启用了javascript，我脑海中的菜单应该消失了（我已经取出了新菜单的代码）。我很感谢大家对CSS添加的意见，因为我没有想到这一点，我本来打算使用noscript标记作为“故障保护”。我真的很感谢关于CSS的建议，我认为这确实是一个很好的添加，绝对值得投几票，因为这不是我在《s之夜》中看到的内容如果通过谷歌查询。谢谢！！我会尝试一下，我理解的jQuery数量令人震惊：）非常感谢你的建议！我将尝试一下，我理解的jQuery数量令人震惊：）非常感谢您的建议！