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

Question

I have a problem with a mobile menu toggle not working on this site: http://www.toscanzahoeve.be

The mobile menu toggle (displays below 975 px) doesn't work. The javascript works for the toggle itself (gets the class 'activated') but not for the 'nav' element below (which style should switch from 'display: none' to 'display: block').

This is a site where it does work: http://downloadaproduct.com/

And this is the javascript code:

( 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 );

I spent hours trying to resolve this, any help would be greatly appreciated!

Thanks, Stefaan

Answer 1

You haven't specified what "doesn't work" about your code, but I do see this:

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

Here, you are setting the value of the aria-pressed attribute to a function (as if this were an event handler, which it is not). The function will not actually execute in this scenario - the entire function simply becomes the value of the attribute.

According to the W3C Spec , this attribute can have the following values:

• true/false : Value representing either true or false, with a default "false" value.
• tristate : Value representing true or false, with an intermediate "mixed" value. Default value is "false" unless otherwise specified.
• true/false/undefined : Value representing true or false, with > a default "undefined" value indicating the state or property is not relevant.
• ID reference : Reference to the ID of another element in the same document
• ID reference : list A list of one or more ID references.
• integer : A numerical value without a fractional component.
• number : Any real numerical value. string Unconstrained value type.
• token : One of a limited set of allowed values.
• token list : A list of one or more tokens.

As you can see, a function is not acceptable as the value.

I think what you want is the result of the body of your function (which will return true or false , both acceptable values), but not a function itself:

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