Question

我有一个反应灵敏的导航栏，除了一件事外，其他功能都很出色……当我单击部分区域（例如：关于，服务等）时，我想关闭导航栏。我现在只能用一个汉堡包按钮将其关闭。对于简历，它滚动得很好，但是我的导航栏隐藏了该页面（不会关闭）。

Css代码：

is-open .header__navbar--menu {
    transform: translateY(0);
}
     /*---head responsive medium screen---*/


@media only screen and (max-width: 1200px){
    .container {
        width: 100%;
        padding: 0 20px;
    }
    .header__navbar--toggle {
        display: flex;
        z-index: 1000;
    }
    .header__navbar--menu {
        transition: all 0.3s ease-in-out;
        transform: translateY(-100%);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 100vw;
        height: 100vh;
        background: #f39c12;
        top: 0;left: 0;
    }
    .header__navbar--menu-link {
        margin: 20px 0;
        font-size: 24px;
    }
    .header__navbar--menu-link:hover {
        color: black;
    }
} 

    /*---head responsive small screen---*/
@media only screen and (max-width: 575px){
    .container {
        width: 100%;
        padding: 0 20px;
    }
    .main_title {
        font-size: 25px;
        padding-bottom: 25px;
        margin: auto;
    }
    .main_title-btn {
        font-size: 14px;
        padding: 10px 14px;
    }

    .header__navbar--toggle {
        width: 25px;
        height: 45px;
        z-index: 1000;
    }
    .header__navbar--menu-link:hover {
        color: #333;
    }
}

js代码（tp打开但未关闭）：


/*slide toggle*/
$('.header__navbar--toggle').click(function(e) {
    e.preventDefault();
    $('.header__navbar').toggleClass('is-open');
})
$(document).ready(function(){
    $('a[href^="#"]').on('click', function(evt){
        evt.preventDefault();
        var target = $(this).attr('href');
        $('html, body')
        .stop()
        .animate({scrollTop: $(target).offset().top},1000);
    });
});

谢谢！

Answer 1

您可以触发点击事件，也可以在事件监听器中切换汉堡菜单的'is-open'类：

$('.header__navbar--toggle').click(function(e) {
    e.preventDefault();
    $('.header__navbar').toggleClass('is-open');
});
$(document).ready(function(){
    $('a[href^="#"]').on('click', function(evt){
        evt.preventDefault();
      //use this:
      //$(‘.header__navbar').toggleClass('is-open');
      // OR this:
      //$(‘.header__navbar--toggle').click()
      // OR this:
      //$(‘.header__navbar’).removeClass(‘is-open');
        var target = $(this).attr('href');
        $('html, body')
        .stop()
        .animate({scrollTop: $(target).offset().top},1000);
    });
});

当我单击其中一部分时，如何关闭导航栏？

1 个答案: