jquery show hide 在移动设备中不起作用

Question

我正在设计我的网站的移动友好版本，一切似乎都运行良好，但我无法点击在点击功能显示该 div 后显示的 div 内的链接。

$(document).ready(function() {

document.addEventListener("touchstart", function() {},false);



$("#business").click(function(){
    $(this).addClass('on');
    $("#business_open").show();
    $("#menu_open").hide();
});

$("#menu").click(function(){
    $(this).addClass('on');
    $("#menu_open").show();
    $("#business_open").hide();
});

});

这里是 HTML：

<div class="wrapper"></div>

<div id="business">
  <span>Title</span>
</div>

  <div id="business_open">
    <ul>
      <li><a href="link1.html">Link 1</a></li>
      <li><a href="link2.html">Link 2</a></li>
    </ul>
  </div>

<div id="menu">
  <em>m</em>
</div>

  <div id="menu_open">
    <ul>
      <li><a class="selected" href="link1.html">Link 1</a></li>
      <li><a href="link2.html">Link 2</a></li>

    </ul>
  </div>

Answer 1

您的事件可能在 DOM 完成加载之前被分配。你可以通过将它们包装在一个 jQuery 就绪函数中来解决这个问题，它的简写如下所示：

$(function(){
    $("#business").click(function(){
        $(this).addClass('on');
        $(".wrapper, #business_open").show();
        $("#menu_open").hide();
    });

    $("#menu").click(function(){
        $(this).addClass('on');
        $(".wrapper, #menu_open").show();
        $("#business_open").hide();
    });

    $(".wrapper").click(function(){
        $(".wrapper, #business_open, #menu_open").hide();
        $('#business, #menu').removeClass('on');
    });
});