0

我在 phonegap/cordova 应用程序中实现以下代码。不幸的是，我在 android 上遇到了 webview 的一些问题。在 webview 中，似乎没有通过复选框切换打开菜单。但是，它确实可以在 android 上的 chrome 中使用。另一种可能性是 css3 转换/转换在 webview 中不兼容。如果有更多知识和经验的人可以指出导致菜单在 Web 视图中不触发的原因或知道可能的解决方案，我将不胜感激。

JSFIDDLE：http ://fiddle.jshell.net/nicooprat/Aahqh/

HTML 

<input type="checkbox" name="handler-right" class="handler" id="handler-right" onclick="null" />
<input type="checkbox" name="handler-left" class="handler" id="handler-left" onclick="null" />

<div id="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Our work</a></li>
        <li><a href="#" class="active">Our clients</a></li>
        <li><a href="#">Who are we ?</a></li>
        <li><a href="#">Get in touch</a></li>
    </ul>
</div>

<div id="favorites">
    <ul>
        <li><a href="#">Fav #1</a></li>
        <li><a href="#">Fav #2</a></li>
        <li><a href="#" class="active">Fav #3</a></li>
        <li><a href="#">Fav #4</a></li>
        <li><a href="#">Fav #5</a></li>
        <li><a href="#">Fav #6</a></li>
        <li><a href="#">Fav #7</a></li>
        <li><a href="#">Fav #8</a></li>
        <li><a href="#">Fav #9</a></li>
        <li><a href="#">Fav #10</a></li>
        <li><a href="#">Fav #12</a></li>
        <li><a href="#">Fav #13</a></li>
        <li><a href="#">Fav #14</a></li>
        <li><a href="#">Fav #15</a></li>
        <li><a href="#">Fav #16</a></li>
        <li><a href="#">Fav #17</a></li>
        <li><a href="#">Fav #18</a></li>
    </ul>
</div>

<div id="wrapper">
    <p id="button">
        <label for="handler-right" id="right" href="#">Open right →&lt;/label>
        <label for="handler-left" id="left" href="#">← Open left</label>
    </p>

    <div id="content">

        <p>Cras sed ante. Phasellus in massa. Curabitur dolor eros, gravida et, hendrerit ac, cursus non, massa. Aliquam lorem. In hac habitasse platea dictumst. Cras eu mauris. Quisque lacus. Donec ipsum. Nullam vitae sem at nunc pharetra ultricies. Vivamus elit eros, ullamcorper a, adipiscing sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna.</p>

        <p>Cras sed ante. Phasellus in massa. Curabitur dolor eros, gravida et, hendrerit ac, cursus non, massa. Aliquam lorem. In hac habitasse platea dictumst. Cras eu mauris. Quisque lacus. Donec ipsum. Nullam vitae sem at nunc pharetra ultricies. Vivamus elit eros, ullamcorper a, adipiscing sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna.</p>

        <p>Cras sed ante. Phasellus in massa. Curabitur dolor eros, gravida et, hendrerit ac, cursus non, massa. Aliquam lorem. In hac habitasse platea dictumst. Cras eu mauris. Quisque lacus. Donec ipsum. Nullam vitae sem at nunc pharetra ultricies. Vivamus elit eros, ullamcorper a, adipiscing sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna.</p>

        <p>Cras sed ante. Phasellus in massa. Curabitur dolor eros, gravida et, hendrerit ac, cursus non, massa. Aliquam lorem. In hac habitasse platea dictumst. Cras eu mauris. Quisque lacus. Donec ipsum. Nullam vitae sem at nunc pharetra ultricies. Vivamus elit eros, ullamcorper a, adipiscing sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna.</p>

        <p>Cras sed ante. Phasellus in massa. Curabitur dolor eros, gravida et, hendrerit ac, cursus non, massa. Aliquam lorem. In hac habitasse platea dictumst. Cras eu mauris. Quisque lacus. Donec ipsum. Nullam vitae sem at nunc pharetra ultricies. Vivamus elit eros, ullamcorper a, adipiscing sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna.</p>

    </div>   
</div>

CSS

$blue: #336c95;
$transitionSpeed: .5s;
$menuOffset: 80%;

html , body {
    position: relative;
    width: 100%;
    height: 100%;
    font-family: "Helvetica", sans-serif;
    font-size: 15px;
    overflow: hidden;
}

#menu , #favorites {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: $menuOffset;
    z-index: 1;
    background: #333;
    overflow: auto;
    opacity: 0;
    -webkit-transition: opacity 0s $transitionSpeed;

    ul {
        display: block;
        height: 100%;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;

        li a {
            display: block;
            padding: 10px;
            border-bottom: 1px solid #222;
            color: #fff;
            text-shadow: 0 1px 0 #000;
            font-weight: bold;
            text-decoration: none;
            box-shadow: 0 1px 0 rgba(255,255,255,.05) inset;
            background: -webkit-linear-gradient(rgba(255,255,255,.02) 0%, rgba(0,0,0,.1) 100%);
            background: -moz-linear-gradient(rgba(255,255,255,.02) 0%, rgba(0,0,0,.1) 100%);

            &.active {
                background-color: $blue;
            }
        }
    }
}

#favorites {
    left: auto;
    right: 0;
}

.handler {
    display: none;

    &#handler-right:checked {

        & ~ #favorites {
            opacity: 1;
            -webkit-transition: opacity 0s 0s;
            -moz-transition: opacity 0s 0s;
        }

        & ~ #wrapper {
            -webkit-transform: translate3D(-$menuOffset,0,0);
            -moz-transform: translate3D(-$menuOffset,0,0);

            #content {
                overflow: hidden;
            }
        }
    }

    &#handler-left:checked {

        & ~ #menu {
            opacity: 1;
            -webkit-transition: opacity 0s 0s;
            -moz-transition: opacity 0s 0s;
        }

        & ~ #wrapper {
            -webkit-transform: translate3D($menuOffset,0,0);
            -moz-transform: translate3D($menuOffset,0,0);

            #content {
                overflow: hidden;
            }
        }
    }
}

#wrapper {
    position: relative;
    z-index: 2;
    background: #F5F5F5;
    height: 100%;
    box-shadow: 0 0 3px #000;
        -webkit-transform: translate3D(0,0,0);
        -moz-transform: translate3D(0,0,0);
    -webkit-transition: -webkit-transform $transitionSpeed ease-in-out;
    -moz-transition: -moz-transform $transitionSpeed ease-in-out;

    #button {
        height: 20px;
        padding: 10px;
        background: #eee;
        line-height: 20px;

        label {
            color: #666;
            text-transform: uppercase;
            text-decoration: none;
            cursor: pointer;

            &:hover {
                color: $blue;
            }

            &#right {
                float: right;
            }
        }
    }

    #content {
        padding: 10px;
        color: #666;
        line-height: 1.5em;
        font-size: .9em;
        font-weight: 300;
        position: absolute;
        top: 40px;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;

        p:not(:last-child) {
            margin-bottom: 20px;
        }
    }
}
4

1 回答 1

1

webkit 相邻/兄弟选择器和伪类存在一个错误，不允许您在 Android <= 4.1.2 上组合它们。解决方案是在 body 元素中添加一个 webkit-only 的假动画：

body { 
    -webkit-animation: bugfix infinite 1s; 
}
@-webkit-keyframes bugfix { 
    from {padding:0;} 
    to {padding:0;} 
}

请参阅以下 StackOverflow 线程：https ://stackoverflow.com/a/8320736/1012875

于 2013-08-25T19:26:22.297 回答