使用 javascript 或 angular js 隐藏侧边栏

Posted 2023-05-09

【中文标题】使用 javascript 或 angular js 隐藏侧边栏

【英文标题】：side bar hide using javascript or angular js

【发布时间】：2020-10-27 12:34:12

【问题描述】：

我正在为我的项目使用下面的 jquery 脚本。但我需要使用 javascript 或 angular js 来做到这一点。不是来自jQuery。我是怎么做的。 我的功能

    $('.menu-item').click(function () 
        if ($(window).width() < 767) 
            $("body").removeClass("sidebar-open");
        
    );

【参考方案1】：

你可以只使用纯原生 JS 来替换 jquery。根据您之前的代码，它可能是：

var button = document.querySelector('.menu-item');
button.addEventListener("click", function()
if (window.width < 767) 
  document.body.classList.remove("sidebar-open");
);

【讨论】：

我可以在没有调用函数的情况下使用它吗？

我不这么认为。但是，为什么不使用 css 来解决这个问题呢？

如何使用 css 进行点击事件？你知道其他选择吗

我的意思是你可以使用 css 来隐藏你的侧边栏，例如当窗口的大小使用 css 媒体查询调整到 767 以下时。无论如何，您真的需要触发按钮单击来执行此操作吗？

【参考方案2】：

这就是你在 javascript 中的做法，基本上我将你的 jQuery 代码转换为 vanilla javascript：

const btn = document.querySelector(".menu-item")

btn.addEventListener("click", function() 
  if (window.screen.width < 767) 
    document.body.classList.remove("sidebar-open")
  
)

【讨论】：

我可以在没有调用功能的情况下使用它吗？