[英]Dropdown Menu isn't Working on iPhone
Currently having an issue where my navigation and dropdowns aren't working on iOS devices, specifically iPhone. 当前遇到一个问题,我的导航和下拉菜单在iOS设备(特别是iPhone)上不起作用。
When the user clicks a nav item, that has children, I toggle a class on the parent container, which displays the dropdown. 当用户单击具有子项的导航项时,我在父容器上切换了一个类,该类显示了下拉菜单。
Below is the HTML: 以下是HTML:
<div class="menu-main-menu-container">
<ul id="menu-main-menu" class="menu">
<li id="menu-item-365" class="dropdown menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-365 nav-open"><a href="#">About</a>
<ul class="sub-menu">
<li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44"><a href="http://localhost:8888/beulah/about/im-new/">I’m New</a></li>
<li id="menu-item-166" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-166"><a href="http://localhost:8888/beulah/about/membership/">Membership</a></li>
<li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43"><a href="http://localhost:8888/beulah/about/core-values/">Core Values</a></li>
<li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45"><a href="http://localhost:8888/beulah/about/our-history/">Our History</a></li>
<li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-46"><a href="http://localhost:8888/beulah/about/staff-directory/">Staff Directory</a></li>
</ul>
</li>
</ul>
</div>
CSS: CSS:
.sub-menu {
opacity: 0;
max-height: 0;
visibility: hidden;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.nav-open .sub-menu {
visibility: visible;
position: relative;
opacity: 1;
padding-top: 25px;
padding-bottom: 25px;
height: inherit;
max-height: 300px;
}
JS: JS:
$(".menu-item > a").click(function(e){
e.preventDefault();
$(this).parent().toggleClass("nav-open");
});
As of right now, the class is applied, when clicked, but on iPhone the dropdown does not open up. 到目前为止,单击该类即已应用,但在iPhone上该下拉列表无法打开。
The problem is, iPad/iPhone click event is not triggered the way it is on your desktop. 问题是,iPad / iPhone点击事件没有像在桌面上那样触发。
You need to pick any of these events: 您需要选择以下任何事件:
touchstart
touchmove
touchend
touchcancel
so, here : 所以在这里 :
$(".menu-item > a").bind( "touchstart" , function(e){
e.preventDefault();
$(this).parent().toggleClass("nav-open");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.