响应点击的菜单，但不点击iPhone

Question

我有一个用HTML编写的菜单，如下所示

<ul>
       <li class="lang-icon"><label>Language</label>
             <ul>
                  <li>lang 1</li>
                  <li>lang 2</li>
                  <li>lang 3</li>
             </ul>
       </li>
</ul>

使用此javascript将display: none;子菜单切换为display: block

$(document).ready(function() {
  $(document).on('click touch', '.lang-icon', function() {
    toggle_menu(".lang-select");
  });
  $(document).on('click touch', '.search-icon', function() {
    toggle_menu(".search-bar");
    $(".search-navigation").toggleClass("search--on");
  });
  $(document).on('click touch', '.nav-menu-icon', function() {
    toggle_menu(".menu--list");
  });
  $("#gform_fields_1 #input_1_5").val("eo");
});

function toggle_menu(element) {
  // show/hide this element
  $(element).toggle();
    // ensure only one element is shown at a time
    $.each([".lang-select", ".search-bar", ".menu--list"], function( index, other_element ) {
      if ((other_element != element) && ($(other_element).css('display') != 'none')) {
        $(other_element).hide();
      }
  });
}

问题是虽然当输入设备是鼠标时菜单完全切换，但使用点击时没有任何反应。

此问题的最可能原因是什么？