Question

我使用jQuery创建了一个汉堡菜单。我还创建了另一个jQuery函数，当单击一个链接时，该函数会自动向下滚动页面到锚点位置。现在，当点击其中一个auto_close类链接时，我需要汉堡菜单功能才能关闭。

<nav>
            <img class="logo_animated" src="images/popsies.svg">

            <ul id="height">
                <li class="auto_close"><a href="#welcomeAnchor">Welcome</a></li>
                <li class="auto_close"><a href="#menuAnchor">Menu</a></li>
                <li class="auto_close"><a href="#timesAnchor">Opening Times</a></li>
                <li id="mob_icons">
                    <a href=""><i class="fa fa-facebook-official fa-2x" aria-hidden="true"></i></a>
                    <a href=""><i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i></a>
                </li>
                <li class="mob_contact">Tel: 0113 0000000</li>
                <li class="mob_contact">Email: example@yahoo.co.uk</li>
            </ul>
        </nav>

我的汉堡菜单功能：

$(document).ready(function(){
$(".burger-button").click(function(){
    $("nav").toggleClass("show");
    $("body").toggleClass("no_scroll");
});
});

Answer 1

假设show班级显示汉堡菜单，请在点击任何a元素时将其删除。

$("#height li a").click(function() {
  $(".burger-button").removeClass("show");
});

Answer 2

由于您使用的是切换，因此您只需添加对.auto_close a链接的引用即可：

$(document).ready(function(){
$(".burger-button,.auto_close a").click(function(){
    $("nav").toggleClass("show");
    $("body").toggleClass("no_scroll");
});
});

Answer 3

最简单的方法，如果你的汉堡总是打开，点击你的一个链接。

$('.auto_close').click(function(){
    $(".burger-button").trigger('click')
})

否则，如果不确定汉堡总是打开，只需删除类

$('.auto_close').click(function(){
    $("nav").removeClass("show");
    $("body").removeClass("no_scroll");
});

jQuery检查是否单击了链接

3 个答案: