Question

我正在研发移动导航。我理解简单的if / else是如何工作的（并且我还没有使用jQ / js一段时间），因为两个语句都是串行执行的，所以必然存在一些根本错误。实际上'else'首先运行，然后 - 无论我是否包含'toggleNav（）'函数或$（nav）.toggleClass（'open'） - 然后'if'语句也会执行。

我认为这可能与事件有关，所以我在li.dashboard-toggle-nav和（a.dashboard-toggle-nav-link）中的链接上尝试了这个功能，结果相同;我也尝试过使用if / else使用长度方法并检查可见性（花了一些时间在SO上阅读相关问题）;仍然，'else'语句执行，然后'if'。

不过，不受欢迎的结果只发生在我的笔记本电脑（FF＆amp; Chrome）上，但在我的测试机器人（也是FF和Chrome）上按预期工作。有人可以向我解释为什么会这样吗？

我意识到还有其他方法可以切换元素的可见性或显示，但我的印象是，至少在这样的例子中，简单地切换类是合适的，

由于

Whiskey T。

HTML：

<li class="dashboard-tool dashboard-toggle-nav">
    <a class="dashboard-toggle-nav-link" href="#" title="Show Menu">Menu</a>
</li>
<nav id="nav"> ... etc.

JQ：

$(document).ready(function() {

    $(".dashboard-toggle-nav").on("click", ".dashboard-toggle-nav-link", function(e) {
        var nav = $("nav#nav"); // <nav#nav> holds both #nav-search + ul#nav-catalog

        // same problem using: if (($("nav.open").length == 0)) {
        // same problem using: if ($(nav).is(":visible")) {
        if ($(nav).hasClass("open")) {
            alert(" *if* ");
            $(nav).slideUp(333);
        }

        else {
            alert(" *else* ");
            $(nav).slideDown(666);
        }

        // problem occurs with or without this:
        // $(nav).toggleClass("open");
        // ... or this:
        toggleNav();
        e.preventDefault();
    })

    function toggleNav() {
        alert("toggleNav running");
        $(nav).toggleClass("open");
    }

});

Answer 1

您的功能正在运行两次（从您的控制台日志结果中可以看出这一点）。第一次，它采取了虚假的道路，第二次，它采取了真正的路径，因为第一次采取的行动。

preventDefault会停止click事件的默认操作，但它不会阻止事件进一步向上传播DOM。 stopImmediatePropagation()阻止传播。

jquery if else语句都按顺序执行

1 个答案: