单击切换功能禁用preventdefault

Question

当我点击touchMenuButton时，我正在尝试执行一个在两个函数之间切换的脚本。单击它时，我想添加和删除一个类，当它再次单击它时，将其反转并删除并添加这些类。但它不起作用，我无法弄清楚原因。

$(function () {
    var touchMenuButton = $("#touchmenubutton");
    var touchMenuCanvas = $("#touchmenucanvas");
    var touchMenuDrawer = $("#touchmenudrawer");

    $(touchMenuButton).click(function (e) {
        e.preventDefault();
    });

    $(touchMenuButton).on("click", function () {
        if $(touchMenuCanvas).hasClass("canvas-closed") {
            $(this).removeClass("canvas-closed");
            $(this).addClass("canvas-open");
        } else {
            $(this).removeClass("canvas-open");
            $(this).addClass("canvas-closed");
        }
    });
});

Answer 1

如果不是，你不必做所有这些。只需切换课程：

touchMenuButton.click(function(e) {
    e.preventDefault();
    touchMenuCanvas.toggleClass("canvas-closed canvas-open");
});

那就是说，你的代码应该可行。没有更多信息或演示，我无法说更多。