Question

我有一个全屏滑动导航菜单，其中包含链接，点击后滚动到相关部分。单击#hamburger div可以滑动菜单。我想要的是当我点击一个链接时菜单再次滑出视图但发生的事情是它向上滑动然后再次向下滑动

<div id="hamburger">
    <nav id="navigation">
        <ul>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
        </ul>            
    </nav>
</div> 

<script> 
$(document).ready(function(){
    $("#hamburger , ul li a").click(function(){
        $("#navigation").slideToggle("slow");
    });
});
</script>

Answer 1

您必须停止 event-propagation ，

$(document).ready(function(){
    $("#hamburger , ul li a").click(function(e){
        e.stopPropagation();
        $("#navigation").slideToggle("slow");
    });
});

当您点击 anchor 元素时，该事件将传播到顶部，直到它到达文档，并且在此期间它会越过#hamburger并且它也将触发其点击事件。因此#navigation元素上下滑动。

Answer 2

我刚注意到我的导航装置在汉堡包内。把它移到汉堡包下面就可以了。菜鸟错误

使用多个源滑动切换元素

2 个答案: