Question

移动菜单切换无法在此网站上运行时出现问题：https://jsfiddle.net/qhpfoqng/2/

移动菜单切换（显示在975像素以下）不起作用。 javascript适用于切换本身（获取类'激活'）但不适用于下面的'nav'元素（哪种样式应该从'display：none'切换到'display：block'）。

这是一个有效的网站：http://www.toscanzahoeve.be

这是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的值，默认值 “虚假”的价值。
三态：表示真或假的值，带有中间值 “混合”的价值。除非另有说明，否则默认值为“false”。
true / false / undefined ：表示true或false的值，使用＆gt;一个默认的“未定义”值表示状态或属性不是相关的。
ID引用：引用同一个中其他元素的ID 文件
ID引用：list一个或多个ID引用的列表。
整数：没有小数分量的数值。
数字：任何实际数值。 string无约束值类型。
令牌：一组有限的允许值。
令牌列表：一个或多个令牌的列表。

如您所见，函数不可接受为值。

我认为你想要的是你的函数体的结果（它将返回true或false，两者都是可接受的值），但不是函数本身：

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

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

1 个答案: