Changeset 28699

Timestamp:

06/08/2014 06:47:58 PM (12 years ago)

Author:

lancewillett

Message:

Twenty Thirteen: make submenu links work correctly on tablets. Props tar.gz, purzlbaum, DavidTheMachine. See #24767.

Location:

trunk/src/wp-content/themes/twentythirteen

Files:

• functions.php (modified) (1 diff)
• js/functions.js (modified) (1 diff)
• style.css (modified) (1 diff)

trunk/src/wp-content/themes/twentythirteen/functions.php

@@ -171 +171 @@
 
         // Loads JavaScript file with functionality specific to Twenty Thirteen.
-        wp_enqueue_script( 'twentythirteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '2014-03-18', true );
+        wp_enqueue_script( 'twentythirteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '2014-06-08', true );
 
         // Add Source Sans Pro and Bitter fonts, used in the main stylesheet.

trunk/src/wp-content/themes/twentythirteen/js/functions.js

@@ -51 +51 @@
                 } );
 
+                // Fix sub-menus for touch devices.
+                if ( 'ontouchstart' in window ) {
+                        menu.find( '.menu-item-has-children > a' ).on( 'touchstart.twentythirteen', function( e ) {
+                                var el = $( this ).parent( 'li' );
+
+                                if ( ! el.hasClass( 'focus' ) ) {
+                                        e.preventDefault();
+                                        el.toggleClass( 'focus' );
+                                        el.siblings( '.focus' ).removeClass( 'focus' );
+                                }
+                        } );
+                }
+
                 // Better focus for hidden submenu items for accessibility.
                 menu.find( 'a' ).on( 'focus.twentythirteen blur.twentythirteen', function() {

trunk/src/wp-content/themes/twentythirteen/style.css

@@ -2896 +2896 @@
         }
 
-        .toggled-on .nav-menu li a:hover,
-        .toggled-on .nav-menu ul a:hover {
+        .toggled-on .nav-menu > li a:hover,
+        .toggled-on .nav-menu > ul a:hover {
                 background-color: #db572f;
                 color: #fff;