0

我正在尝试通过使用 jQuery 手风琴插件来稍微增强我网站的菜单：

http://jqueryui.com/accordion/

这工作得很好，我认为它是一个很棒的插件，可以使用......但是，我注意到它需要特定的布局才能实现这些结果：

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

现在这是一个问题，当禁用 javascript 时，会显示此菜单的整个输出（所有类别和包含信息）。

这只是太多的信息，无法一次全部输出，这就是它首先与 PHP 分离的原因。本质上它看起来像这样：

// No category selected
* Fruits
* Vegetables

// Category selected
o Fruits
 - Apples
 - Oranges
* Vegetables

// Javascript Disabled
o Fruits
 - Apples
 - Oranges
* Vegetables
 - Potatoes
 - Onions

所以我想做的是为禁用 javascript 的用户提供另一种导航方式（旧菜单功能齐全，无论如何都可以使用）。

我目前在现代化器中使用了一些选项：

http://modernizr.com/

为了增加浏览器对我使用的某些 CSS 属性的支持。我知道它可用于通过将类“js”附加到 body 标记来检测是否启用了 javascript。

因此，我决定尝试将旧菜单包装在包含 div 中，并将新菜单包装在包含 div 中。我的想法是，然后我可以将这些 div 与display: none;.

在我继续之前，我真的只是在这里猜测，所以如果我以错误的方式进行此操作......如果有人能指出我正确的方向，我将不胜感激。顺便说一句，我在stackoverflow上找到了一篇与此相关的文章：

PHP & <noscript> 组合检测浏览器中启用的 JavaScript

并且由于我对 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>

现在我面临的问题是我似乎无法让这个脚本注册或产生任何明显的差异。当我查看源代码中的 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>
4

2 回答 2

2

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(){ ... }) 所以我想这解释了为什么你的代码不起作用。

于 2013-08-20T23:13:36.447 回答
1

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

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

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

此外，如果禁用了 Javascript，Modernizr 也无济于事，因为它是一个 JavaScript 库。

于 2013-08-20T23:11:49.117 回答