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