Question

我创建了一个单页滚动网站，导航自然包含锚链接。当点击锚链接时，我已经能够让移动导航消失（如下面的jQuery代码所示），但是当我点击移动导航图标时，我必须单击它两次才能重新出现导航

点击锚点链接时，有没有办法用jquery将导航重置为默认编码？这是我到目前为止所拥有的。

.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>

driver.execute_script("document.querySelector(\"[ng-click='move(1)']\").click();")

Answer 1

You can trigger click of your close button when anchor link is clicked.

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

Your previous code:

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

This code was just hiding element but not unchecking hidden checkbox and your CSS is based on checked property of hidden checkbox.

Answer 2

jsBin demo

jQuery(document).ready(function($){
    $('.Menu-link').on('click', function(e) {
        e.preventDefault(); // if needed.

        // $(".Menu-list").hide();             // insetad of hard-hiding...
        $(".HiddenCheckbox").trigger("click"); // symulate the menu icon click
    });
});

单击锚点链接时，使用jquery隐藏移动导航

2 个答案: