使用 querySelector

Question

我想在点击事件中引用一个按钮，以访问 a div 上的 dropdown Content 标记并将显示设置为 block。我该怎么做？

const dropdownBtn = document.querySelectorAll('.dropdownBtn')
for (const button of dropdownBtn) {
  button.addEventListener('click', (e) => {
    const links = document.querySelectorAll(`.${button} + .dropdownContent a`)
    links.forEach(link => link.style.display = 'block')
  })
}

<div class="menu">
  <div class=dropdown>
    <button class='dropdownBtn'>Button1</button>
    <div class="dropdownContent">
      <a href="#">Test1</a>
      <a href="#">Test2</a>
      <a href="#">Test3</a>
    </div>
  </div>

  <div class=dropdown>
    <button class='dropdownBtn'>Button2</button>
    <div class="dropdownContent">
      <a href="#">Test1</a>
      <a href="#">Test2</a>
      <a href="#">Test3</a>
    </div>
  </div>
</div>

感谢您的帮助。

Answer 1

这会将 a 元素设置为 block，仅适用于作为按钮的下一个兄弟的 .dropdownContent。

document.querySelectorAll('.dropdownBtn').forEach((btn) => {
  btn.addEventListener('click', (evt) => {
    const dropdownDiv = evt.target.nextElementSibling;
    for (let i = 0; i < dropdownDiv.children.length; i++) {
      dropdownDiv.children[i].style.display = 'block';
    }
  });
});

document.querySelectorAll('.dropdownBtn').forEach((btn) => {
  btn.addEventListener('click', (evt) => {
    const dropdownDiv = evt.target.nextElementSibling;
    for (let i = 0; i < dropdownDiv.children.length; i++) {
      dropdownDiv.children[i].style.display = 'block';
    }
  });
});

<div class="menu">
  <div class=dropdown>
    <button class='dropdownBtn'>Button1</button>
    <div class="dropdownContent">
      <a href="#">Test1</a>
      <a href="#">Test2</a>
      <a href="#">Test3</a>
    </div>
  </div>

  <div class=dropdown>
    <button class='dropdownBtn'>Button2</button>
    <div class="dropdownContent">
      <a href="#">Test1</a>
      <a href="#">Test2</a>
      <a href="#">Test3</a>
    </div>
  </div>
</div>
<div>
  <ul id="test">
  </ul>
</div>

Answer 2

如果我理解正确的话，这可以通过获取当前按钮的父元素然后仅查询其子元素来完成。

我是这样做的：

const dropdownBtn = document.querySelectorAll('.dropdownBtn')
for (const button of dropdownBtn) {
  button.addEventListener('click', (e) => {
    const links = button.parentElement.querySelectorAll(`.dropdownContent a`)
    links.forEach(link => link.style.display = 'block')
  })
}

<div class="menu">
  <div class=dropdown>
    <button class='dropdownBtn'>Button1</button>
    <div class="dropdownContent">
      <a href="#">Test1</a>
      <a href="#">Test2</a>
      <a href="#">Test3</a>
    </div>
  </div>

  <div class=dropdown>
    <button class='dropdownBtn'>Button2</button>
    <div class="dropdownContent">
      <a href="#">Test1</a>
      <a href="#">Test2</a>
      <a href="#">Test3</a>
    </div>
  </div>
</div>

Answer 3

循环外部下拉容器，然后您可以查询该容器内的元素。

切换类而不是内联样式的示例：

const dropdown = document.querySelectorAll('.dropdown');
dropdown.forEach(el => {
  el.querySelector('.dropdownBtn').addEventListener('click', function() {
    el.querySelectorAll('.dropdownContent a').forEach(link => link.classList.toggle('active'))
  });
});

a.active {
  color: red
}

<div class="menu">
  <div class=dropdown>
    <button class='dropdownBtn'>Button1</button>
    <div class="dropdownContent">
      <a href="#">Test1</a>
      <a href="#">Test2</a>
      <a href="#">Test3</a>
    </div>
  </div>

  <div class=dropdown>
    <button class='dropdownBtn'>Button2</button>
    <div class="dropdownContent">
      <a href="#">Test1</a>
      <a href="#">Test2</a>
      <a href="#">Test3</a>
    </div>
  </div>
</div>

Answer 4

看这段代码，我想你的意思是选择下一个兄弟

const links = document.querySelectorAll(`.${button} + .dropdownContent a`)

除了使用 +，您还可以使用

const links = button.nextElementSibling.querySelectorAll(".dropdownContent a")

例如，不创建额外的 links 变量：

const dropdownBtn = document.querySelectorAll('.dropdownBtn')
for (const button of dropdownBtn) {
  button.addEventListener('click', (e) => {
    button.nextElementSibling.querySelectorAll(".dropdownContent a")
      .forEach(link => link.style.display = 'block')
  })
}

<div class="menu">
  <div class=dropdown>
    <button class='dropdownBtn'>Button1</button>
    <div class="dropdownContent">
      <a href="#">Test1</a>
      <a href="#">Test2</a>
      <a href="#">Test3</a>
    </div>
  </div>

  <div class=dropdown>
    <button class='dropdownBtn'>Button2</button>
    <div class="dropdownContent">
      <a href="#">Test1</a>
      <a href="#">Test2</a>
      <a href="#">Test3</a>
    </div>
  </div>
</div>