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 ready函数中来解决这个问题，其简写如下：

$(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');
    });
});

jquery show hide无法在移动设备上工作

1 个答案: