javascript - 滚动后单击时下拉菜单消失

Question

我有一个下拉菜单，当您的屏幕小于 930 像素时，它会随着您滚动显示。在滚动之前效果很好。您滚动它并保持在顶部但是在您滚动并单击下拉菜单后，下拉菜单消失了。有什么想法吗？

https://www.w3schools.com/code/tryit.asp?filename=FFFCYA8T8LZZ

Answer 1

向下滚动后，您的 #myTopnav 具有 class="topnav active"。您的点击处理程序是这样的:

function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}

如果您在向下滚动后单击，元素的类不等于 topnav(因为它是 topnav active)，因此此函数将类设置回 topnav，去掉进程中的active类

既然你在页面中有 jQuery，你可以使用它的 toggleClass 方法:

function myFunction() {
    $("#myTopnav").toggleClass("responsive");
}

这确保了 responsive 类和 active 类相互独立地改变。