此幻灯片菜单可在台式机上使用，但不能在移动设备上使用

Question

https://jsfiddle.net/8x2b040p/3/embedded/result/

该代码在台式机上完美运行，何时将浏览器大小调整为移动屏幕大小即可，但是在移动时无法打开菜单。

提前致谢。 我刚来这地方！

(function() {

        var bodyEl = $('body'),
            navToggleBtn = bodyEl.find('.nav-toggle-btn');

        navToggleBtn.on('click', function(e) {
            bodyEl.toggleClass('active-nav');
            e.preventDefault();
        });

})();

Answer 1

您忘记将jQuery添加到小提琴的外部资源中。 将其添加进去，然后可以正常工作： https : //jsfiddle.net/8x2b040p/4/embedded/result/ 。

另一种选择是不依赖jQuery的原始JavaScript版本：

(function() {

    document.querySelector('.nav-toggle-btn').addEventListener('click', function (e) {
        document.body.classList.toggle('active-nav');
        e.preventDefault();
    });

})();

香草JS版本： https ： //jsfiddle.net/8x2b040p/5/