jquery - 单击 anchor 链接时使用 jquery 隐藏移动导航

Question

我创建了一个单页滚动网站，导航自然由 anchor 链接组成。我已经能够在单击 anchor 链接时使移动导航消失(如下面的 jQuery 代码所示)，但是当我单击移动导航图标时，我必须单击它两次才能重新出现导航。

当单击 anchor 链接时，是否有任何方法可以使用 jquery 将导航重置为其默认编码？这是我到目前为止所拥有的。

jQuery(document).ready(function($){
    $('.Menu-link').on('click', function() {
        $(".Menu-list").hide();
    });
});

.HiddenCheckbox {
    display: none;
}
.MenuContainer {
    display: block;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2;
    left: 0;
    padding: 20px;
    opacity: 0.9;
    background: #333;
    height:30px;
}
.MenuHeader {
    color: #999999;
    display: inline-block;
    float: left;
    font-weight: 100;
    line-height: 30px;
    margin: 0 0 0 15px;
    opacity: 0;
    position: relative;
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
    -webkit-transition: -webkit-transform 0.6s, opacity 0.5s;
    transition: transform 0.6s, opacity 0.5s;
    z-index: 2;
}
.MenuIcon {
    cursor: pointer;
    display: block;
    float: left;
    height: 30px;
    position: relative;
    width: 30px;
    z-index: 2;
}
.MenuIcon::before {
    -webkit-box-shadow: #999999 0 12px 0;
    box-shadow: #999999 0 12px 0;
    height: 6px;
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;
    width: 30px;
}
.MenuIcon::after {
    bottom: 0;
    height: 6px;
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    width: 30px;
}
.MenuIcon::before, .MenuIcon::after {
    background: #999999;
    display: block;
    content:'';
    position: absolute;
    -webkit-transition: -webkit-box-shadow 0.2s linear, -webkit-transform 0.4s 0.2s;
    transition: box-shadow 0.2s linear, transform 0.4s 0.2s;
}
.Menu {
    background: #333;
    left: -125%;
    position: absolute;
    top: 0;
    z-index:1;
    width: 100%;
    -webkit-transition: left 0.4s;
    transition: left 0.4s;
}
.HiddenCheckbox:checked ~ .MenuHeader {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}
.HiddenCheckbox:checked ~ .MenuIcon::before {
    -webkit-box-shadow: transparent 0 0 0;
    box-shadow: transparent 0 0 0;
    -webkit-transform: rotate(45deg) translate3d(6px, -3px, 0);
    transform: rotate(45deg) translate3d(6px, -3px, 0);
}
.HiddenCheckbox:checked ~ .MenuIcon::after {
    -webkit-transform: rotate(-45deg) translate3d(6px, 3px, 0);
    transform: rotate(-45deg) translate3d(6px, 3px, 0);
}
.HiddenCheckbox:checked ~ .Menu {
    left: 0;
}
.Menu-list {
    list-style-type: none;
    margin: 70px 0 0;
    padding-bottom: 10px;
}
.Menu-item {
    margin: 0;
}
.Menu-link {
    color: #fff;
    display: block;
    overflow: hidden;
    padding: 8px 22px;
    position: relative;
    text-decoration: none;
    z-index: 1;
}
.Menu-link::before {
    background: #444;
    bottom: 0;
    content:'';
    left: 0;
    position: absolute;
    right: 100%;
    top: 0;
    -webkit-transition: right 0.4s;
    transition: right 0.4s;
    z-index: -1;
}
.Menu-link::after {
    display:none;
    content: attr(href);
    color: #fff;
    float: right;
    opacity: 0;
    -webkit-transition: opacity 0.8s, -webkit-transform 0.4s;
    transition: opacity 0.8s, transform 0.4s;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
}
.Menu-link:hover::before {
    right: 0;
}
.Menu-link:hover::after {
    opacity: 0.5;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

<div class="MenuContainer">
    <input id="menu" type="checkbox" name="menu" class="HiddenCheckbox" />
    <label for="menu" class="MenuIcon"></label>
    <h2 class="MenuHeader">Menu</h2>

    <nav class="Menu">
        <ul class="Menu-list">
            <li class="Menu-item">
                <a href="" target="_blank" class="Menu-link">Home</a>
            </li>
            <li class="Menu-item">
                <a href="" target="_blank" class="Menu-link">Sample Chapter</a>
            </li>
            <li class="Menu-item">
                <a href="" target="_blank" class="Menu-link">Author</a>
            </li>
            <li class="Menu-item">
                <a href="" target="_blank" class="Menu-link">Contact</a>
            </li>
            <li class="Menu-item">
                <a href="" target="_blank" class="Menu-link">Links & Resources</a>
            </li>
        </ul>
    </nav>
</div>

Answer 1

当点击 anchor 链接时，您可以触发关闭按钮的点击。

jQuery(document).ready(function($){
    $('.Menu-link').on('click', function() {
        $(".MenuIcon").trigger('click');
    });
});

您之前的代码:

$(".Menu-list").hide();

此代码只是隐藏元素，但没有取消选中隐藏复选框，并且您的 CSS 基于隐藏复选框的选中属性。