Question

我有一个汉堡包图标，当点击它时会动画到x和背面，这反过来会激活滑出菜单。当单击菜单中的链接时，菜单关闭，页面滚动到相关部分。然而菜单图标则保持“x”状态。我想在点击其中一个链接时将“x”切换回汉堡包状态。动画通过css控制

<div id="hamburger" class="slideout-menu-toggle">
    <div id="nav-icon3">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>

<script>
    $(document).ready(function(){
    $('#nav-icon3').click(function(){
    $(this).toggleClass('open');
    });
});

    $('.slideout-menu-toggle').click(function(){
    $("#nav-icon3").toggleClass('open');
});
</script>

可以在http://fatdonut.ie/

查看该网站

点击右边的汉堡菜单图标打开滑出菜单。当点击菜单中的一个链接时，汉堡包图标保持在“x”状态。我希望链接点击将“x”切换回汉堡包

Answer 1

我假设汉堡包是由open类引发的CSS驱动，如果没有，你应该提供更多细节，以便我们知道发生了什么。

点击其中一个其他链接后，从菜单图标中删除open课程：

$('.yourLinks').click(function(){
  $(".open").removeClass('open');
});

将.yourLinks替换为适合您实际链接的选择器，这应该会在点击任何其他链接时重置汉堡包菜单。

更具体的版本现在我看了你的网站。

从.slideout-menu-toggle移除#hamburger并交换你的JS：

$(document).ready(function(){
    $('#hamburger').click(function(){
        $(this).toggleClass('open');
    });
    $('.slideout-menu-toggle').click(function(){
        $('.open').removeClass('open');
    });
});

您点击open课程时将.slideout-menu-toggle课程切换到#nav-icon3，而不是将其从$(this)中移除，因为您已将其应用于已点击的项目qqqq%2Fwwww%3Feeee%26rrrr%3Dtttt。你在多种类型的元素上也有相同的类，这使得情况非常混乱。

切换带链接的菜单图标

1 个答案: