MediaWiki:Gadget-subpagenav.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* =============================================================================
   Gadget-subpagenav.js
   Adds carets and touch/click support to Template:SubpageNav dropdowns.
   ============================================================================= */
( function () {
    $( function () {
        var $navLinks = $( '.subpage-nav-links' );
        if ( !$navLinks.length ) return;

        // Find all list items that contain a nested <ul>
        var $dropdowns = $navLinks.find( 'li' ).has( 'ul' );
        $dropdowns.addClass( 'has-dropdown' );

        // Append a caret to the top-level link or span
        $dropdowns.children( 'a, span' ).append( '<span class="subpage-nav-caret">▼</span>' );

        // Handle clicks for toggling menus
        $navLinks.on( 'click', '.has-dropdown > a, .has-dropdown > span', function ( e ) {
            var $parentLi = $( this ).parent();
            var isOpen = $parentLi.hasClass( 'is-open' );

            // Close other open dropdowns at the same level
            $parentLi.siblings( '.has-dropdown' ).removeClass( 'is-open' );

            // Toggle current
            $parentLi.toggleClass( 'is-open' );

            // If the item is just text (a span), prevent default click behavior
            // If it's a link (a tag), we usually want to let them navigate to it, 
            // but on mobile, the first tap should ideally open the menu. 
            // For safety, if it's a span, we stop the event.
            if ( $( this ).is( 'span' ) ) {
                e.preventDefault();
            }
        } );

        // Close dropdowns when clicking anywhere outside the nav
        $( document ).on( 'click', function ( e ) {
            if ( !$( e.target ).closest( '.subpage-nav-links' ).length ) {
                $( '.subpage-nav-links .has-dropdown' ).removeClass( 'is-open' );
            }
        } );
    } );
}() );