Question

当您的屏幕低于930像素时滚动，我有一个下拉菜单。滚动之前，它很有效。您滚动并保持顶部但滚动并单击下拉菜单后，下拉菜单将消失。有什么想法吗？

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

Answer 1

单击时删除的活动类似乎是个问题。

尝试此修复：

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

Answer 2

向下滚动后，#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类彼此独立更改。

滚动后单击时，下拉菜单消失

2 个答案: