Question

我正在尝试创建一个下拉菜单，只有当窗口位于最顶层时向上打开，然后在窗口不在时向下打开。我试图通过IF语句来实现这一点，但不能让它向下显示.how'将向上显示菜单，'show2'将向下显示它。

这是“show”和“show2”的CSS。

.show {display:block;
        bottom: 100%;
}
.show2 {display:block;

}

这是JQuery脚本。正如你所看到的那样，当我在页面顶部时，我试图让它与'show'切换，当用户从顶部向下滚动1或2时，我希望它改为'show2' PX的。也就是直接离开。

当用户点击下拉按钮时，在隐藏和显示下拉内容之间切换。

if (window.top == window.self) {
    function myFunction() {
        document.getElementById("myDropdown").classList.toggle("show");
    }
} else {
    function myFunction2() {
        document.getElementById("myDropdown").classList.toggle("show2");
    }
}

如果用户在其外部点击

，请关闭下拉列表

window.onclick = function (event) {
    if (!event.target.matches('.dropbtn')) {

        var dropdowns = document.getElementsByClassName("dropdown-content");
        var i;
        for (i = 0; i < dropdowns.length; i--) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            } else(openDropdown.classList.contains('show2')) {
                openDropdown.classList.remove('show2');
            }
        }
    }
}

欢迎任何帮助，并提前感谢您！

Answer 1

根据this问题，您可以有条件地声明函数如下。

var myFunction;
if (window.top == window.self) {
    myFunction = function () {
        document.getElementById("myDropdown").classList.toggle("show");
    };
} else {
    myFunction = function () {
        document.getElementById("myDropdown").classList.toggle("show2");
    }
}

创建一个下拉菜单，该菜单在页面顶部向上打开，向下滚动时向下滚动

1 个答案: