jquery if else语句都按顺序执行

Question

我在研究手机导航。我对简单的if/else如何工作的理解肯定有根本性的错误(我已经有一段时间没有使用jQ/js了)，因为这两个语句是串行执行的。实际上‘else’首先运行，然后——不管我是否包含‘toggleNav()’函数或$(nav)。toggleClass('open') -然后也执行' if '语句。

我认为这可能与事件有关，所以我尝试了两个li上的函数。仪表板切换导航和（a.dashboard-toggle-nav-link）中的链接，结果相同；我还尝试过使用长度方法来限定if/else，并检查可见性（我花了一些时间阅读了SO的相关问题）；但是，“else”语句执行，然后执行“if”。

顺便说一句，不希望的结果只发生在我的笔记本电脑上(FF

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

谢谢

威士忌T.

超文本标记语言：

<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 停止单击事件的默认操作，但它不会阻止事件进一步向上传播 DOM。 stopImmediatePropagation（） 停止该传播。