移动菜单上的 JavaScript 似乎不起作用

Question

我遇到了移动菜单切换无法在此网站上工作的问题:http://www.toscanzahoeve.be

移动菜单切换(显示低于 975 像素)不起作用。 javascript 适用于切换本身(获取类“activated”)，但不适用于下面的“nav”元素(其样式应从“display: none”切换到“display: block”)。

这是一个可以正常工作的网站:http://downloadaproduct.com/

这是 JavaScript 代码:

( function( window, $, undefined ) {
'use strict';

$( 'nav' ).before( '<button class="menu-toggle" role="button" aria-pressed="false"></button>' ); // Add toggles to menus
$( 'nav .sub-menu' ).before( '<button class="sub-menu-toggle" role="button" aria-pressed="false"></button>' ); // Add toggles to sub menus

// Show/hide the navigation
$( '.menu-toggle, .sub-menu-toggle' ).on( 'click', function() {
    var $this = $( this );
    $this.attr( 'aria-pressed', function( index, value ) {
        return 'false' === value ? 'true' : 'false';
    });

    $this.toggleClass( 'activated' );
    $this.next( 'nav, .sub-menu' ).slideToggle( 'fast' );

});

})( this, jQuery );

我花了几个小时试图解决这个问题，任何帮助将不胜感激!

谢谢， 史蒂芬

Answer 1

您还没有指定您的代码的哪些内容“不起作用”，但我确实看到了这一点:

$this.attr( 'aria-pressed', function( index, value ) {
    return 'false' === value ? 'true' : 'false';
});

在这里，您将 aria-pressed 属性的值设置为一个函数(就好像这是一个事件处理程序，但事实并非如此)。在这种情况下，该函数实际上不会执行 - 整个函数只是成为属性的值。

根据W3C Spec ，该属性可以具有以下值:

• true/false:表示 true 或 false 的值，有默认值 “假”值。
• tristate :代表 true 或 false 的值，带有中间值 “混合”值。除非另有说明，默认值为“false”。
• true/false/undefined:表示 true 或 false 的值，其中 > a 默认“未定义”值指示状态或属性不是 相关。
• ID引用:引用同一元素中另一个元素的ID 文档
• ID 引用:列表 一个或多个 ID 引用的列表。
• 整数:不带小数部分的数值。
• 数字:任何实数值。 string 无约束值类型。
• token :一组有限的允许值之一。
• token 列表:一个或多个 token 的列表。

如您所见，函数 Not Acceptable 作为值。

我认为你想要的是函数体的结果(它将返回true或false，这都是可接受的值) ，但不是函数本身:

$this.attr( 'aria-pressed', ('false' === value ? 'true' : 'false'));