CSS 不适用于响应式设计的菜单

Question

我为响应式网络制作了一个非常粗略的菜单，一切似乎都运行良好。但是当我在 iPad 和手机等设备上打开时，我发现了一个我无法解决的小错误。我确实为此使用了 jQuery。我想要做的是当菜单在设备中打开时，它应该在单击选项后很快关闭。但我无法做到这一点。除非我重新单击菜单选项，否则我的菜单不会关闭。

HTML

<div class="container">
    <div class="header clearfix">
        <div class="nav">
            <input type="checkbox" id="toggle" />
            <label for="toggle" class="toggle" onclick></label>
            <ul class="menu">
                <li><a href="#">Google</a>
                </li>
                <li><a href="#">Facebook</a>
                </li>
                <li><a href="#">Youtube</a>
                </li>
                <li><a href="#">Twitter</a>
                </li>
                <li><a href="#">Facebook</a>
                </li>
                <li><a href="#">Youtube</a>
                </li>
                <li><a href="#">Twitter</a>
                </li>
            </ul>
        </div>
        <!-- End of Navigation -->
    </div>
    <!-- End of Header -->
</div>

CSS

html, body {
    height: 100%;
    background: #F2F2F2;
}
body, a {
    font: normal 16px Helvetica, Verdana, Geneva, sans-serif;
    color: #3F3F3F;
}
.container {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -30px;
}
.container:after {
    content:'';
    display: block;
    height: 30px;
    clear: both;
}
body {
    -webkit-animation: bugfix infinite 1s;
}
@-webkit-keyframes bugfix {
    from {
        padding:0;
    }
    to {
        padding:0;
    }
}
.header {
    position: relative;
}
#toggle, .toggle {
    display: none;
}
.menu > li {
    list-style: none;
    float:left;
}
.clearfix:before, .clearfix:after {
    display: table;
    content:"";
}
.clearfix:after {
    clear: both;
}
@media only screen and (max-width: 768px) {
    .menu {
        display: none;
        opacity: 0;
        width: 100%;
        position: absolute;
        right: 0;
    }
    .menu > li {
        display: block;
        width: 100%;
        margin: 0;
    }
    .menu > li > a {
        display: block;
        width: 100%;
        text-decoration: none;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .toggle {
        display: block;
        position: relative;
        cursor: pointer;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
    #toggle:checked ~ .menu {
        display: block;
        opacity: 1;
    }
}
/*--------------------------------
 Presentation Styles (Editable)
---------------------------------*/
 .header {
    min-height: 100px;
    height: 100%;
    padding: 0 20px;
    background: #FFFFFF;
}
.header > h1 {
    float: left;
    padding: 30px 0 0;
    font-style: italic;
    font-family: Georgia;
    font-size: 28px;
    color: #DFDFDF;
}
.nav {
    display: block;
    float: right;
}
.nav, .menu, .menu > li, .menu > li > a {
    height: 100%;
}
.menu > li > a {
    display: block;
    padding: 42px 20px;
    text-decoration: none;
    font-weight: normal;
    font-size: 16px;
    line-height: 1;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.25s linear;
    -moz-transition: all 0.25s linear;
    -o-transition: all 0.25s linear;
    transition: all 0.25s linear;
}
.menu > li > a:hover, .menu > li > a:focus {
    background: #F2F2F2;
    box-shadow: inset 0px 5px #51C1F1;
    color: #51C1F1;
    padding: 50px 20px 34px;
}
.toggle {
    z-index: 2;
}
@media only screen and (max-width: 768px) {
    .menu {
        background: #FFFFFF;
        border-top: 1px solid #51C1F1;
    }
    .menu, .menu > li, .menu > li > a {
        height: auto;
    }
    .menu > li > a {
        padding: 15px 15px;
    }
    .menu > li > a:hover, .menu > li > a:focus {
        background: #F2F2F2;
        box-shadow: inset 5px 0px #51C1F1;
        padding: 15px 15px 15px 25px;
    }
    .toggle:after {
        content:'Main Menu';
        display: block;
        width: 200px;
        margin: 33px 0;
        padding: 10px 50px;
        background: #51C1F1;
        -webkit-border-radius: 2px;
        border-radius: 2px;
        text-align: center;
        font-size: 12px;
        color: #FFFFFF;
        -webkit-transition: all 0.5s linear;
        -moz-transition: all 0.5s linear;
        -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .toggle:hover:after {
        background: #45ABD6;
    }
    #toggle:checked + .toggle:after {
        content:'Close Menu';
    }
}
@media only screen and (max-width: 479px) {
    .header > h1 {
        text-align: center;
    }
    .header > h1, .nav, .toggle:after {
        float: none;
    }
    .toggle:after {
        text-align: center;
        width: 100%;
    }
}

您也可以通过调整浏览器大小来检查它..

这里是FIDDLE

请帮帮我，jQuery 也适用于同样的情况

Answer 1

试试这个demo

$('.menu').click(function(){
    $('#toggle').click();
})

Answer 2

你可以添加script来做你想做的事。

$('.menu li').on("click",function(){
   $('#toggle').trigger("click");
});

用于演示

http://jsfiddle.net/H8VCb/3/

Answer 3

添加以下 jquery。

$('label.toggle').click(function(){    
setTimeout(function(){ 
    if($('ul.menu').css("display") == "block")
         $('#toggle').trigger("click");         
}, 5000); //you can mentioned your seconds here. 1000 = 1 sec.
});

上述功能将显示菜单 5 秒。之后它将隐藏菜单。

FIDDLE DEMO