侧边栏在 Ipad 中没有显示
Posted
技术标签:
【中文标题】侧边栏在 Ipad 中没有显示【英文标题】：SideBar No display in Ipad 【发布时间】：2017-06-07 12:48:53 【问题描述】：美好的一天，
问题我已经尝试对 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，我不知道这是否与问题有关，或者是否有任何 primefaces 查询干扰了文件 jquery。
我已经处理这个问题超过 2 周了，我的网页在本地服务器上，出于安全原因，如果您想完整查看它，我会通过聊天或电子邮件向您提供链接。
对不起，我的英语不是很好。
【问题讨论】：
【参考方案1】：Web 中的某些 jquery 功能在 IPAD 或任何其他设备中的工作方式不同。
试试这个
$('selector').on('click touchstart', function()
);
$("#showmenu1").on('click touchstart', function()
classie.toggle(this, 'active');
classie.toggle(menunivel1, 'menu1open');
);
【讨论】：
以上是关于侧边栏在 Ipad 中没有显示的主要内容，如果未能解决你的问题，请参考以下文章
当侧边栏在 Shiny 中折叠时如何自动缩放 uiOutput()