Блог

В настоящее время возникла проблема, из-за которой моя навигация и выпадающие списки не работают на устройствах iOS, в частности iPhone.

Когда пользователь нажимает на элемент навигации, у которого есть дочерние элементы, я переключаю класс в родительском контейнере, который отображает выпадающий список.

Ниже приведен 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:

 .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:

 $(".menu-item > a").click(function(e){
  e.preventDefault();
  $(this).parent().toggleClass("nav-open");
});
  

На данный момент класс применяется при нажатии, но на iPhone выпадающий список не открывается.

Проблема в том, что событие нажатия на iPad / iPhone запускается не так, как на вашем рабочем столе.

Вам нужно выбрать любое из этих событий:

 touchstart
touchmove
touchend
touchcancel
  

итак, здесь :

 $(".menu-item > a").bind( "touchstart" , function(e){
     e.preventDefault();
     $(this).parent().toggleClass("nav-open");
});