Question

因此，我尝试创建一个手风琴样式菜单，如果您单击面板，它将打开该部分。如果再次单击它，它将关闭。最重要的是，它还应该关闭以前打开的任何其他面板。

我几乎拥有该功能，但问题是我必须单击两次。

要了解我的意思，请查看此Fiddle

您会注意到，如果打开link one然后尝试打开link 2，则必须按两次link 2。

我如何做到这一点，以使您只需按下一次即可关闭link 1，还要打开link 2？

let dropdown = document.querySelectorAll('.dropdown-toggle');
const handleClick = (e) => {
  const active = document.querySelector('.open');
  if(active){
    active.classList.remove('open');
  } else {
    e.currentTarget.nextElementSibling.classList.add('open')
  }
}
dropdown.forEach(element => {
  element.addEventListener('click', handleClick);
});

body {
  background: #ccc;
}

.menu {
  background: #fff;
  margin: 0 auto;
  max-width: 400px;
}
.menu ul {
  padding: 0;
  text-align: center;
  width: 100%;
}
.menu ul li {
  list-style: none;
  padding: 20px 0;
  border-bottom: 1px solid #ccc;
}
.menu ul li a {
  text-decoration: none;
}
.menu ul li .dropdown {
  display: none;
  padding: 20px;
  background: grey;
}
.menu ul li .dropdown.open {
  display: block;
}

<div class="menu">
  <ul>
    <li>
      <a href="#" class="dropdown-toggle">link 1</a>
      <div class="dropdown">Some text</div>
    </li>
    <li>
      <a href="#" class="dropdown-toggle">link 2</a>
      <div class="dropdown">Some text</div>
    </li>
    <li>
      <a href="#" class="dropdown-toggle">link 3</a>
      <div class="dropdown">Some text</div>
    </li>
    <li>
      <a href="#" class="dropdown-toggle">link 4</a>
      <div class="dropdown">Some text</div>
    </li>
    <li>
      <a href="#" class="dropdown-toggle">link 5</a>
      <div class="dropdown">Some text</div>
    </li>
  </ul>
</div>

Answer 1

可以像下面那样使用js。

let dropdown = document.querySelectorAll('.dropdown-toggle');
const handleClick = (e) => {

  const isLastOpenTargetClicked = e.currentTarget.nextElementSibling.classList.contains('open');
  
  if(isLastOpenTargetClicked) {
    e.currentTarget.nextElementSibling.classList.remove('open');
    return;
  }
  
  const active = document.querySelector('.open');
  if(active){
    active.classList.remove('open');
  }
  
  e.currentTarget.nextElementSibling.classList.add('open')
  
}
dropdown.forEach(element => {
  element.addEventListener('click', handleClick);
});

body {
  background: #ccc;
}

.menu {
  background: #fff;
  margin: 0 auto;
  max-width: 400px;
}
.menu ul {
  padding: 0;
  text-align: center;
  width: 100%;
}
.menu ul li {
  list-style: none;
  padding: 20px 0;
  border-bottom: 1px solid #ccc;
}
.menu ul li a {
  text-decoration: none;
}
.menu ul li .dropdown {
  display: none;
  padding: 20px;
  background: grey;
}
.menu ul li .dropdown.open {
  display: block;
}

<div class="menu">
  <ul>
    <li>
      <a href="#" class="dropdown-toggle">link 1</a>
      <div class="dropdown">Some text</div>
    </li>
    <li>
      <a href="#" class="dropdown-toggle">link 2</a>
      <div class="dropdown">Some text</div>
    </li>
    <li>
      <a href="#" class="dropdown-toggle">link 3</a>
      <div class="dropdown">Some text</div>
    </li>
    <li>
      <a href="#" class="dropdown-toggle">link 4</a>
      <div class="dropdown">Some text</div>
    </li>
    <li>
      <a href="#" class="dropdown-toggle">link 5</a>
      <div class="dropdown">Some text</div>
    </li>
  </ul>
</div>

Answer 2

无需检查当前元素是否处于活动状态；在点击处理程序上，您只想检查.nextElementSibling的 .classList 是否包含类open。如果是这样，请将其删除。如果没有，请套用它。

这可以在下面看到：

let dropdown = document.querySelectorAll('.dropdown-toggle');
const handleClick = (e) => {
  if (e.currentTarget.nextElementSibling.classList.contains('open')) {
    e.currentTarget.nextElementSibling.classList.remove('open');
  } else {
    e.currentTarget.nextElementSibling.classList.add('open')
  }
}
dropdown.forEach(element => {
  element.addEventListener('click', handleClick);
});

body {
  background: #ccc;
}

.menu {
  background: #fff;
  margin: 0 auto;
  max-width: 400px;
}

.menu ul {
  padding: 0;
  text-align: center;
  width: 100%;
}

.menu ul li {
  list-style: none;
  padding: 20px 0;
  border-bottom: 1px solid #ccc;
}

.menu ul li a {
  text-decoration: none;
}

.menu ul li .dropdown {
  display: none;
  padding: 20px;
  background: grey;
}

.menu ul li .dropdown.open {
  display: block;
}

<div class="menu">
  <ul>
    <li>
      <a href="#" class="dropdown-toggle">link 1</a>
      <div class="dropdown">Some text</div>
    </li>
    <li>
      <a href="#" class="dropdown-toggle">link 2</a>
      <div class="dropdown">Some text</div>
    </li>
    <li>
      <a href="#" class="dropdown-toggle">link 3</a>
      <div class="dropdown">Some text</div>
    </li>
    <li>
      <a href="#" class="dropdown-toggle">link 4</a>
      <div class="dropdown">Some text</div>
    </li>
    <li>
      <a href="#" class="dropdown-toggle">link 5</a>
      <div class="dropdown">Some text</div>
    </li>
  </ul>
</div>

Answer 3

在您的点击处理程序内，循环document.querySelectorAll（'。dropdown-toggle'），从类列表中删除所有打开的内容，然后将打开的内容添加到当前目标

如何解决这个不断扩大的问题？

3 个答案: