Ipad 侧边栏无显示

Question

美好的一天，

问题我已经尝试应用 Ipad 的所有修复程序以使菜单正常工作，例如 onclick="" 和 cursor: pointer;，我已经检查 Jquery通过放置来工作： $(document).ready(function(){alert("We accessed the Javascript"); }); 它适用于所有设备，但在 Ipad 中根本不起作用，无法识别点击并且不会更改样式 class 。

我用这个例子作为蓝图，然后我定制它，所以它没有太大的变化。

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 周了，我的网页在本地服务器上，出于安全原因，我会通过聊天或电子邮件向您提供 link 如果您想参加完整的看一下。

抱歉，我的英语不是很好。

Answer 1

Web 中的某些 jquery 功能在 IPAD 或任何其他设备中的工作方式不同。

试试这个

$('selector').on('click touchstart', function() {

});

 $("#showmenu1").on('click touchstart', function(){
                    classie.toggle(this, 'active');
                    classie.toggle(menunivel1, 'menu1open');
   });

Ipad 侧边栏无显示

SideBar No display in Ipad

javascript

xhtml

jquery

ipad

ios