如何通过单击其外部来关闭元素？

发布于 2025-02-08 19:42:58 字数 451 浏览 2 评论 0原文

当前，我正在尝试关闭元素的样式与“ display = none”不同时。我在控制台中遇到了一个错误，告诉我列表。有些不是一个函数，所以我可能不太了解“一些”方法。

我想要的更多信息：鉴于我有3个列表（在列表中），当我单击外部或它的元素时，我想关闭所有列表

）

const lists = document.querySelectorAll(".list");

function closeList() {
    document.addEventListener("click", () => {
        if(lists.some((list) => list.style.display != "none")) {
            return lists.style.display = none;
        } else return;
    });
};

原文

I'm currently trying to close an element when its style is different than "display = none".
I'm having an error in the console telling me that lists. some aren't a function so I may not have understood well the "some" method.

More Infos on what I want :
Given that I have 3 lists (in lists), when I click outside of it or its elements I want to close all the lists)

Thanks in advance

const lists = document.querySelectorAll(".list");

function closeList() {
    document.addEventListener("click", () => {
        if(lists.some((list) => list.style.display != "none")) {
            return lists.style.display = none;
        } else return;
    });
};

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

柳若烟 2025-02-15 19:42:58

您可以使用 noreferrer“> node.contains（）是否检查是否检查是否检查 event.target.target 是元素的后代和运行<强>回调如果不是：

function onClickOutside(ele, cb) {
  document.addEventListener('click', event => {
    if (!ele.contains(event.target)) cb();
  });
};

// Using
onClickOutside('#list', () => console.log('Hi!'));
// Will log 'Hi!' whenever the user clicks outside of #list

You can use Node.contains() to check if Event.target is a descendant of element and run callback if not:

function onClickOutside(ele, cb) {
  document.addEventListener('click', event => {
    if (!ele.contains(event.target)) cb();
  });
};

// Using
onClickOutside('#list', () => console.log('Hi!'));
// Will log 'Hi!' whenever the user clicks outside of #list

回复收藏 0 原文

素染倾城色 2025-02-15 19:42:58

我为您建议这种方法：

          @HostListener('document:click', ['$event.target'])
  public onClick(targetElement) {
    const event = this.elementRef.nativeElement.contains(targetElement);
    if (targetElement && !event) {
      if (this.isClickedOutside) {
        // this.shownInfo = false;
}
}

或者您也可以只有一个JavaScript：

    window.addEventListener('click', function(e){   
  if (document.getElementById('clickbox').contains(e.target)){
    // Clicked in box
  } else{
    // Clicked outside the box
  }
});

I suggest for you this method :

          @HostListener('document:click', ['$event.target'])
  public onClick(targetElement) {
    const event = this.elementRef.nativeElement.contains(targetElement);
    if (targetElement && !event) {
      if (this.isClickedOutside) {
        // this.shownInfo = false;
}
}

or you can also just a javascript :

    window.addEventListener('click', function(e){   
  if (document.getElementById('clickbox').contains(e.target)){
    // Clicked in box
  } else{
    // Clicked outside the box
  }
});

回复收藏 0 原文

挽清梦 2025-02-15 19:42:58

JS QuerySelectorall（）将返回Nodelist，但是Nodelist没有方法（）。您可以使用以下内容：

const lists = document.querySelectorAll(".list");

function closeList() {
    document.addEventListener("click", () => {
        lists.forEach(list => {
            if(list.style.display != "none") lists.style.display = none
        })
    });
};

Js querySelectorAll() will return a nodeList, but nodeList doesn't have method some(). You can use forEach() the following:

const lists = document.querySelectorAll(".list");

function closeList() {
    document.addEventListener("click", () => {
        lists.forEach(list => {
            if(list.style.display != "none") lists.style.display = none
        })
    });
};

回复收藏 0 原文

~没有更多了~