Twenty Thirteen mobile menu doesn't work with sub pages

[davidhamiltron]

Are you using either the latest version of WordPress, or the latest development version?
Running against trunk as of a few minutes ago. Also tested on 4.1.1.

What steps should be taken to consistently reproduce the problem?
Install a fresh installation of the latest version of WordPress (4.1.1) or trunk and log in as admin.
Select Twenty Thirteen theme.
Add page + sub-pages to menu.
Navigate to site using mobile device (tested with Nexus 5) or chrome dev tools mobile emulation.
Click the menu item and the sub menu opens quickly then closes as the browser navigates to the menu item. Sub menu items can't be reached.

In case it's relevant to the ticket, what is the expected output or result? What did you see instead?
Expected result: Menu item children are shown and can be clicked on.
See instead: Click seems to open children then click on the menu item itself.

Please provide any additional information that you think we'd find useful.

This seems very similar to #28716 and #30686. Looking at the code in wp-content/themes/twentythirteen/js/functions.js it looks like this has been addressed before, but there are similar classes that both need to be targeted.

See line 73, where both .menu-item and .page_item are targeted, I guess for backwards compatibility. This should also happen on line 60, where

".menu-item-has-children > a" is the only target. Adding ".page_item_has_children > a" fixes the issue.

These class names seem to be used together usually in the code, I'm guessing one is being transitioned to the other or they have slightly different purposes.

[lancewillett]

Thanks much for the ticket and the patch.

[lancewillett]

In 31932:

Twenty Thirteen: make sure submenu links work correctly on small screens with touch events.

Fixes #31762, props davidhamiltron.