在移动响应中显示菜单

Question

在我们的某个网站上，我们遇到了响应式设计的问题。我们想让主导航中的“子菜单”（子列表项）显示为无，并在您点击.....“菜单”时出现。唯一的问题是，如果你点击菜单，它会带你到菜单页面，因为它是一个链接...

这是网站

http://dev.trafficdigitalagency.com/stage/

<ul id="mobilenav"><li id="back"><a href="#top" class="menutop">Hide Navigation</a>  </li><li id="menu-item-1549" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-1546 current_page_item menu-item-1549"><a href="http://dev.trafficdigitalagency.com/stage/menu/">Menu</a>
<ul class="sub-menu">
<li id="menu-item-88" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-88"><a href="http://dev.trafficdigitalagency.com/stage/wine-beer-cocktails/">Wine, Beer &amp; Cocktails</a></li>
<li id="menu-item-87" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-87"><a href="http://dev.trafficdigitalagency.com/stage/appetizers/">Appetizers</a></li>
<li id="menu-item-86" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-86"><a href="http://dev.trafficdigitalagency.com/stage/soups/">Soups</a>  </li>
<li id="menu-item-84" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-84"><a href="http://dev.trafficdigitalagency.com/stage/wraps-sandwiches/">Sandwiches</a></li>
<li id="menu-item-85" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-85"><a href="http://dev.trafficdigitalagency.com/stage/burgers-dogs/">Burgers &amp; Dogs</a></li>
<li id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-82"><a href="http://dev.trafficdigitalagency.com/stage/saladandfishplates/">Salads &amp; Smoked Fish</a></li>
<li id="menu-item-83" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-83"><a href="http://dev.trafficdigitalagency.com/stage/entrees/">Entrees</a>  </li>
<li id="menu-item-1631" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1631"><a href="http://dev.trafficdigitalagency.com/stage/dessert/">Dessert</a></li>
<li id="menu-item-81" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-81"><a href="http://dev.trafficdigitalagency.com/stage/247-breakfast/">24/7 Breakfast</a></li>
<li id="menu-item-1070" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1070"><a href="http://dev.trafficdigitalagency.com/stage/daily-specials/">Daily Specials</a></li>
<li id="menu-item-1629" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1629"><a href="http://dev.trafficdigitalagency.com/stage/from-the-delicatessen/">Delicatessen</a></li>
<li id="menu-item-1630" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1630"><a href="http://dev.trafficdigitalagency.com/stage/kids/">Kids</a>        </li>
<li id="menu-item-2357" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2357"><a href="http://dev.trafficdigitalagency.com/stage/wp-content/uploads/2013/03/StageDeliMenu_Dec2012.pdf">PDF Menu</a></li>
</ul>
</li>
<li id="menu-item-898" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-898"><a href="http://dev.trafficdigitalagency.com/stage/catering-2/">Catering</a>
<ul class="sub-menu">
<li id="menu-item-313" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-313"><a href="http://dev.trafficdigitalagency.com/stage/appetizer-platters/">Appetizers</a></li>
<li id="menu-item-311" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-311"><a href="http://dev.trafficdigitalagency.com/stage/lunch-trays/">Trays</a></li>
<li id="menu-item-2239" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2239"><a href="http://dev.trafficdigitalagency.com/stage/box-lunches/">Box Lunches</a></li>
<li id="menu-item-310" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-310"><a href="http://dev.trafficdigitalagency.com/stage/hot-entrees/">Entrees</a></li>
<li id="menu-item-312" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-312"><a href="http://dev.trafficdigitalagency.com/stage/fruit-dessert/">Desserts</a></li>
<li id="menu-item-1608" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1608"><a href="http://dev.trafficdigitalagency.com/stage/family-style-dining/">Family Style Dining</a></li>
<li id="menu-item-1610" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1610"><a href="http://dev.trafficdigitalagency.com/stage/overnight-deli-to-you/">Deli To You</a></li>
<li id="menu-item-1611" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1611"><a href="http://dev.trafficdigitalagency.com/stage/delivery/">Delivery</a></li>
<li id="menu-item-2356" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2356"><a href="http://dev.trafficdigitalagency.com/stage/wp-content/uploads/2013/03/StageDeli_Catering.pdf">PDF Catering Menu</a></li>
</ul>
</li>
<li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15"><a href="http://dev.trafficdigitalagency.com/stage/history/">About Us</a>
<ul class="sub-menu">
<li id="menu-item-1563" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1563"><a href="http://dev.trafficdigitalagency.com/stage/food/">Food</a>   </li>
<li id="menu-item-1562" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1562"><a href="http://dev.trafficdigitalagency.com/stage/bread/">Bread</a></li>
<li id="menu-item-1561" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1561"><a href="http://dev.trafficdigitalagency.com/stage/history-2/">History</a></li>
<li id="menu-item-1560" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1560"><a href="http://dev.trafficdigitalagency.com/stage/press/">Press</a></li>
<li id="menu-item-1559" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1559"><a href="http://dev.trafficdigitalagency.com/stage/bios/">Bios</a></li>
<li id="menu-item-2165" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2165"><a href="http://dev.trafficdigitalagency.com/stage/mavens-guide/">Mavens Guide</a></li>
<li id="menu-item-2537" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2537"><a href="http://dev.trafficdigitalagency.com/stage/events/">Calendar</a></li>
<li id="menu-item-1558" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1558"><a href="http://dev.trafficdigitalagency.com/stage/gallery/">Gallery</a></li>
 </ul>
 </li>
 <li id="menu-item-1548" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1548"><a href="http://dev.trafficdigitalagency.com/stage/connections/">Community</a>
 <ul class="sub-menu">
<li id="menu-item-1574" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1574"><a href="http://dev.trafficdigitalagency.com/stage/supporting-our-community/">Supporting</a></li>
<li id="menu-item-1573" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1573"><a href="http://dev.trafficdigitalagency.com/stage/feeding-our-community/">Feeding</a></li>
<li id="menu-item-1572" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1572"><a href="http://dev.trafficdigitalagency.com/stage/connecting-our-community/">Connecting</a></li>
<li id="menu-item-1571" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1571"><a href="http://dev.trafficdigitalagency.com/stage/optimist-club/">Optimist</a></li>
 </ul>
 </li>
 <li id="menu-item-1538" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1538"><a href="http://dev.trafficdigitalagency.com/stage/locations/">Hours &amp; Location</a>
 <ul class="sub-menu">
<li id="menu-item-2199" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2199"><a href="http://dev.trafficdigitalagency.com/stage/stage-west-bloomfield/">Stage W. Bloomfield</a></li>
<li id="menu-item-1565" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1565"><a href="http://dev.trafficdigitalagency.com/stage/naples-stage-62/">Stage 62 Naples</a></li>
<li id="menu-item-1564" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1564"><a href="http://dev.trafficdigitalagency.com/stage/somerset-stage-deli/">Stage Deli Somerset</a></li>
</ul>
</li>
</ul>

Answer 1

移动浏览器会生成触摸事件，因此在您的代码中，有onmouseover处理程序的地方也会添加ontouchend，所以使用jQuery：

$('SELECTOR').on('mouseover', function () {
    // your code to unfold the menu
});

成为这个：

$('SELECTOR').on('mouseover touchend', function () {
    // your code to unfold the menu
});