关闭画布菜单在Iphone 5上不起作用

Question

I have an off canvas menu that "according to my client" that appears to not be functioning correctly. 我有一个“根据我的客户”显示的画布菜单似乎无法正常运行。 There are no errors whatsoever in my console, so I am not sure whats going on here, and i don't have an Iphone/pad to test on. 我的控制台中没有任何错误，因此我不确定这里发生了什么，并且我没有要测试的Iphone / pad。 Anyone want to give this a shot? 有人要试一试吗？ demo 演示

html: HTML：

<html>
    <body>  
        <div id="site-wrapper" class="container">
            <nav id="site-menu">
                <ul class="nav">
                    <li class="parent"><a class="accordian-toggle" href="#" >Item Parent</a>
                        <ul class="nav-child unstyled small">
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                        </ul>
                    </li>
                    <li class="parent"><a class="accordian-toggle" href="#" >Item Parent</a>
                        <ul class="nav-child unstyled small">
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>  
            <header id="header">
                <a class="brand" href="/">My Company</a><br />
            </header>
            <div id="site-canvas">
                <div id="mainbody">
                    <div class="container-fluid">
                        <p>main content</p>
                    </div>
                </div>
                <footer>
                    <p>footer</p>
                </footer>
            </div>
        </div>
    </body>
</html>

css/less: CSS /少：

header {
    position: fixed;
    top: 0;
    z-index: @z-index * 6;
    overflow: hidden;
    width: 100%;
    height: 65px;
}

#site-wrapper {
    .reset-box;
}

#mainbody {
    width: @100;
    margin: 65px auto 0;
}

#menuToggle {
    position: fixed;
        top: 15px; left: 0;
    z-index: @z-index * 7;
}


#menuButton {
    background-color: @black;
    margin: 0;
    padding: 0;
    height: 35px;
    width: 50px;
}

#menuButton:hover {background-color: @black-hover;}

#site-menu {
    background-color: @black;
    height: @100;
    position: fixed;
    top: 0; left: -340px;
    width: 330px;   
    z-index: @z-index * 5;  
}

#site-menu:after {z-index: @z-index * 7;}

#site-canvas {
    backface-visibility: hidden;
    height: @100;   
    transform: translateX(0);   
    transform: translate3d(0, 0, 0);    
    width: @100;
}

/********************************
/* OFF CANVAS MENU 
/*******************************/
.show-nav #site-canvas {
    transform: translateX(330px);   
    transform: translate3d(330px, 0, 0);
}

.reveal #site-menu {
    transform: translateX(0);   
    transform: translate3d(0, 0, 0);    
}
.reveal .show-nav #site-menu {
    transition: 900ms ease all;      
    transform: translateX(330px);
    transform: translate3d(330px, 0, 0);    
}

.reveal .show-nav #site-canvas {
    transform: translateX(0);   
    transform: translate3d(0, 0, 0);    
}

and last but not least the js: 最后但并非最不重要的js：

/********************************
/* OFF CANVAS MENU
/*******************************/
$(document).ready(function(){
    var special = ['reveal'];
    $('.main-menu').click(function() {
        var transitionClass = jQuery(this).data('transition');
        if ($.inArray(transitionClass, special) > -1) {
            $('body').removeClass();
            $('body').addClass(transitionClass);
        } else {
            $('body').removeClass();
            $('#site-canvas').removeClass();
            $('#site-canvas').addClass(transitionClass);
        }
        $('#site-wrapper').toggleClass('show-nav'); 
        $('.main-menu i').toggleClass('fa-ellipsis-v fa-ellipsis-h');
        $('.main-menu div').toggle();
        return false;
    }); 
});

/********************************
/* OFF CANVAS MENU HEIGHT
/*******************************/
$(document).ready(function(){
    $('#site-canvas').css({'min-height':($(window).height())+'px'});
    $(window).resize(function(){
        $('#site-canvas').css({'min-height':($(window).height())+'px'});
    });
});

/********************************
/* NAV ACCORDIAN
/*******************************/
$(document).ready(function(){
    $('.accordian-toggle').click(function(){
            $('#site-menu .nav > .parent > .nav-child').slideUp();
            if(!$(this).next().is(':visible')){
                $(this).next().slideDown();
            }
    });
});

Answer 1

I found the problem was missing vendor prefixes... 我发现问题缺少供应商前缀...

/********************************
/* OFF CANVAS MENU 
/*******************************/
.show-nav #site-canvas {
    transform: translateX(-330px);      
    transform: translate3d(-330px, 0, 0);
    -webkit-transform: translateX(-330px);      
    -webkit-transform: translate3d(-330px, 0, 0);
    -ms-transform: translateX(-330px);      
    -ms-transform: translate3d(-330px, 0, 0);
}

.reveal #site-menu {
    transform: translateX(0);   
    transform: translate3d(0, 0, 0);
    -webkit-transform: translateX(0);   
    -webkit-transform: translate3d(0, 0, 0);    
    -ms-transform: translateX(0);   
    -ms-transform: translate3d(0, 0, 0);    
}
.reveal .show-nav #site-menu {
    transition: 900ms ease all;      
    transform: translateX(-330px);
    transform: translate3d(-330px, 0, 0);
    -webkit-transform: translateX(-330px);
    -webkit-transform: translate3d(-330px, 0, 0);   
    -ms-transform: translateX(-330px);
    -ms-transform: translate3d(-330px, 0, 0);   
}

.reveal .show-nav #site-canvas {
    transform: translateX(0);   
    transform: translate3d(0, 0, 0);
    -webkit-transform: translateX(0);   
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translateX(0);   
    -ms-transform: translate3d(0, 0, 0);
}

关闭画布菜单在Iphone 5上不起作用

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-07-28 14:08:44

关闭画布菜单在Iphone 5上不起作用

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-07-28 14:08:44

解决方案1
1 已采纳 2015-07-28 14:08:44