Question

这可能是一个简单的解决方案，但现在我无法弄清楚如何使其工作

$(".a").click(function () {
  if ($("#btnCollapse").css('display')!='none')
    $("#btnCollapse").click();
});

然后我尝试使用香草js，我知道我错过了什么......

var anchor = document.querySelectorAll(".a");   
var button = document.querySelectorAll("#btnCollapse");

function collapseNav() {
  anchor.addEventListener('click', function() { 
   button.style.display="none"
  });
  button.click();
}

Answer 1

querySelectorAll()返回一个元素集合，而不是单个元素，因此您需要循环它。该按钮具有id，因此您可以使用querySelector()选择它以获取单个实例。

您在jQuery版本中也没有collapseNav()函数，因此您的事件处理程序将在加载时添加。

最后逻辑是不一样的。在jQuery中，如果display none不是var anchor = document.querySelectorAll(".a"); var button = document.querySelector("#btnCollapse"); anchor.forEach(function(el) { el.addEventListener('click', function() { if (button.style.display != 'none') button.click(); }); });，则只需点击该按钮。试试这个：

var anchor = document.querySelectorAll(".a");   
var button = document.querySelectorAll("#btnCollapse");
Array.from(anchor).forEach(a => {
    a.addEventListener('click', function() {
        if(button.style.display!="none"){
            button.click();
        }
    });
});

Answer 2

可以使用closure-in-loop，

完成

if (button.style.display != 'none')
    button.click();

Answer 3

直接转换你的＆＃34; jQuery＆＃34;代码：

{{1}}

Answer 4

querySelectorAll返回一个节点列表，因此您需要遍历其结果。

对于#bntCollapse使用querySelector，它将作为单个元素返回。对于id的元素，如果您需要查找很多元素，则可以使用getElementById，这比querySelector

更快

要获取样式，请使用window.getComputedStyle，因为它将返回使用外部CSS设置的样式，而element.style.display则不会。

var anchors = document.querySelectorAll(".a");
for (var i = 0; i < anchors.length; i++) {
  anchors[i].addEventListener('click', function(e){
    var btn = document.querySelector("#btnCollapse");
    if (window.getComputedStyle(btn,null).getPropertyValue("display") != 'none') {
      btn.click();
    }
  })
}

注意，您可以使用foreach来循环元素，但是根据IE，Edge和Safari中的方式可能无法正常工作，因此请对其进行彻底测试，因此我使用{{1} }以获得最大的浏览器支持。

我试图将jquery转换为vanilla javascript

4 个答案: