使用querySelector引用div

Question

我想在事件click中引用一个按钮，以访问dropdown Content目录上的a标记，并将显示设置为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

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

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>

​

Answer 2

这会将按钮的下一个同级.dropdownContent的a元素设置为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';
    }
  });
});

​

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 3

如果我没理解错的话，这可以通过获取当前Button的父元素，然后只查询它的子元素来实现。

我是这样做的：

​

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>

​