美好的一天,
问题我已经尝试应用iPad的所有修复程序以使菜单正常工作,例如onclick=""
和cursor: pointer;
,我已经检查了jQuery是否正在使用:$(document).ready(function(){alert("We accessed the Javascript"); });
它在每个设备中都可以使用,但是在iPad中不起作用,但是完全无法识别点击,也不会更改样式类。
我用作蓝图这个示例,然后我自定义它,因此它并没有太大变化。
slidemenu
这是大型代码,对不起:S:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
class="no-js">
<f:view contentType="text/html">
<h:head>
<f:facet name="first">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge; IE=11; IE=10; IE=9; IE=8; IE=7, chrome=1"/>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<title>BBVA</title>
<!-- BOOTSTRAP STYLES-->
<link href="${request.contextPath}/assets/css/bootstrap.css" rel="stylesheet" media="all" />
<!-- BBVA fonts -->
<link href="${request.contextPath}/assets/css/style2.css" rel="stylesheet" media="all" />
<!--SCRIPTS-->
<!---Apple Safari iPad and iPhone Meta Tags-->
<meta name="viewport" content="width=device-width"/>
<meta name="viewport" content="initial-scale=1.0"/>
<meta name="viewport" content="width=992, initial-scale=1, user-scalable=no"/><!--width is pixels, range 200 to 10000-->
<meta name="format-detection" content="telephone=no"/> <!--disables automatic detection of possible phone numbers-->
<meta name="apple-mobile-web-app-capable" content="yes"/><!--specifies full-screen mode-->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/><!--specify full-screen mode first-->
</f:facet>
<!-- Custom BBVA Theme create by: Alejandro Daza -->
<link href="${request.contextPath}/assets/css/style.css" rel="stylesheet" media="all" />
<script src="${request.contextPath}/assets/js/bootstrap.min.js"></script>
<script src="${request.contextPath}/assets/js/modernizr.custom.js"></script>
<script src="${request.contextPath}/assets/js/style1.js"></script>
<script src="http://192.168.0.3:1337/vorlon.js"></script>
<script src="${request.contextPath}/assets/js/classie.js"></script>
</h:head>
<h:body>
<script>
$(document).ready(function(){
//Check if the current URL contains '#'
if(document.URL.indexOf("#")==-1){
// Set the URL to whatever it was plus "#".
url = document.URL+"#";
location = "#";
//Reload the page
location.reload(true);
}
});
</script>
<div class="container pagina">
<div class="col-md-1 col-lg-1 menu2">
<div class="col-md-4 information nopaddingleft nopaddingright">
<ul class="information_menu">
<li class="active" data-id="1"><a href="onboarding"><i class="icon-home_icon"></i></a></li>
<li data-id="2"><a id="showmenu1" onclick="" ><i class="icon-menu_icon"></i></a></li>
<div class="spacing"></div>
<li data-id="3"><a href="#"><i class="icon-settings_icon"></i></a></li>
<li data-id="4"><a href="#"><i class="icon-help_icon"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span></i></a></li>
</ul>
</div>
<!-- Sidebar -->
<div class="menunivel1 menunivelleft1" id="menunivel1">
<ul class="information_menunivel1">
<li class="active" data-id="1"><a href="#">
<img src="../assets/img/perfil.png" style=" width: 35%; position: absolute; left: 13px;top: 13px;" />
<ul class="menuPerfil">
<li>
Luci Santodomingo
</li>
<li>
Gerente
</li>
<li>
Oficina Calle 123
</li>
<li>
Bogotá
</li>
</ul>
</a></li>
<li><a id="showmenu2" href="#" onclick="" ><p>Gestion comercial <span class="icon-forward_icon flechas"></span></p></a></li>
<li><a href="#"><p>Cartera de clientes <span class="icon-forward_icon flechas"></span></p></a></li>
<li><a href="#"><p>Oportunidades comerciales <span class="icon-forward_icon flechas"></span> </p></a></li>
<li><a href="#"><p>Portal de desarrollo comercial <span class="icon-forward_icon flechas"></span> </p></a></li>
<li><a href="#"><p>Portal MIS <span class="icon-forward_icon flechas"></span></p></a></li>
<li><a href="#"><p>Alerta de fuga</p></a></li>
</ul>
<!-- Sidebar -->
<div class="menunivel2 menunivelleft2" id="menunivel2">
<ul class="information_menunivel2">
<li class="active">
<a href="#">
<ul class="menuPerfil">
</ul>
</a>
</li>
<li ><a id="showmenu3" href="#" onclick=""><p>Citas para hoy <span class="icon-forward_icon flechas"></span></p></a></li>
<li><a href="#"><p>Agenda <span class="icon-forward_icon flechas"></span> </p></a></li>
<li data-id="4"><a href="#"><p>Reclamos <span class="icon-forward_icon flechas"></span> </p></a></li>
</ul>
<!-- Sidebar -->
<div class="menunivel3 menunivelleft3" id="menunivel3">
<ul class="information_menunivel3">
<li class="active" data-id="1">
<a href="#">
<ul class="menuPerfil">
</ul>
</a>
</li>
<li><a href="#"><p>Propia</p></a></li>
<li><a href="#"><p>Mis Ejecutivos </p></a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Page Content -->
<div class="col-md-11 col-lg-11 contenedorderecha clearfix">
<div class="row contenedorModulos clearfix">
<h:form id="principalForm">
<ui:insert name="content"/>
</h:form>
</div>
</div>
</div>
<script>
//<![CDATA[
var menunivel1 = document.getElementById('menunivel1'),
menunivel2 = document.getElementById('menunivel2'),
menunivel3 = document.getElementById('menunivel3');
$("#showmenu1").click(function(){
classie.toggle(this, 'active');
classie.toggle(menunivel1, 'menu1open');
});
$("#showmenu2").click(function(){
classie.toggle(this, 'active');
classie.toggle(menunivel2, 'menu2open');
});
$("#showmenu3").click(function(){
classie.toggle(this, 'active');
classie.toggle(menunivel3, 'menu3open');
});
//]]>
</script>
</h:body>
</f:view>
</html>
您可以看到我正在使用XHTML,我不知道这是否与问题有关,还是是否有任何正在干扰On File jquery的PrimeFaces查询。
我已经解决了这个问题超过2周,我在本地服务器上有网页,出于安全原因,如果您想完整地查看它,我将通过聊天或电子邮件为您提供链接。
对不起,我的英语不是很好。
Web中的某些jQuery函数在iPad或任何其他设备中的工作方式不会相同。
尝试这个
$('selector').on('click touchstart', function() {
});
$("#showmenu1").on('click touchstart', function(){
classie.toggle(this, 'active');
classie.toggle(menunivel1, 'menu1open');
});