css for循环无法在单击时切换

我有麻烦让这个循环再次工作，我有它的工作的一天，但我调整它的地方，我不能得到它回来。
请帮助，如果你有一个解决方案，我也想通过子菜单循环，同时通过箭头打开子菜单。

// index Item 1 //

const indexitem1arrow = document.querySelector('.indexitem1indexarrow');
const indexitem1submenu = document.querySelector('.indexitem1submenu');

const indexItem1Arrows = [
  indexitem2arrow = document.querySelector('.indexitem2indexarrow'),
  indexitem3arrow = document.querySelector('.indexitem3indexarrow'),
  indexitem4arrow = document.querySelector('.indexitem4indexarrow'),
];
const indexItem1ArrowsArrowLoop = () => {
  for (i = 0; i < indexItem1Arrows.length; i++);
  if (indexItem1Arrows[i].classList.contains('rotatearrow')) {
    indexItem1Arrows[i].classList.remove('rotatearrow')
  }
};

const indexItem1Submenus = [
  indexitem2submenu = document.querySelector('.indexitem2submenu'),
  indexitem3submenu = document.querySelector('.indexitem3submenu'),
  indexitem4submenu = document.querySelector('.indexitem4submenu'),
];
const openIndexItem1Submenus = [
  openIndexItem1 =
  () => {
    indexitem1submenu.classList.toggle('hidden');
    indexitem1arrow.classList.toggle('rotatearrow');
  },
  openIndexItem2 =
  () => {
    indexitem2submenu.classList.toggle('hidden');
    indexitem2arrow.classList.toggle('rotatearrow');
  },
  openIndexItem3 =
  () => {
    indexitem3submenu.classList.toggle('hidden');
    indexitem3arrow.classList.toggle('rotatearrow');
  },
  openIndexItem4 =
  () => {
    indexitem4submenu.classList.toggle('hidden');
    indexitem4arrow.classList.toggle('rotatearrow');
  }
];
const indexItem1SubmenusLoop = () => {
  for (i = 0; i < indexItem1Submenus.length; i++);
  if (!indexItem1Submenus[i].classList.contains('hidden')) {
    indexItem1Submenus[i].classList.add('hidden')
  }
};

indexitem1arrow.addEventListener('click', openIndexItem1);
indexitem1arrow.addEventListener('click', indexItem1ArrowsArrowLoop);
indexitem1arrow.addEventListener('click', indexItem1SubmenusLoop);
indexitem2arrow.addEventListener('click', openIndexItem2);
indexitem3arrow.addEventListener('click', openIndexItem3);
indexitem4arrow.addEventListener('click', openIndexItem4);

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
.index-list {
  position: static;
  width: calc(100% - 50%);
  word-wrap: break-word;
  padding: 10px 20px;
  text-align: left;
  border: 3px solid #444;
  margin: 0px 105px 100px 100px;
  box-shadow: #333;
  background-color: #ffffff;
  font-family: poppins;
  font-size: 17px;
}

.index-list li {
  list-style: none;
}

.index-list li a {
  text-decoration: none;
  color: #000;
}

.index-list li i {
  color: #000;
  cursor: pointer;
  font-size: 20px;
}

.index-list .index-itself .index-sub-menu li a {
  position: relative;
  padding-left: 10px;
  font-weight: bold;
}

.index-list .index-itself .index-sub-menu-sub-menu li a {
  position: relative;
  padding-left: 20px;
}

.index-list li i:hover {
  font-size: 22px;
}

.hidden {
  display: none;
}

.rotatearrow {
  transform: rotate(180deg);
}

<!DOCTYPE html>

<head>
  <title>webpage</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <html lang="en" dir="ltr" />
  <link rel="stylesheet" href="css/style.css" />
  <link rel='stylesheet' href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
</head>

<body>
  <div class="index-list">
    <ul class="index-itself">
      <li class="indexitem1 indexitem"><a href="#"><strong>indexitem1</strong></a><i class="fas fa-angle-down indexitem1indexarrow arrow"></i>
        <ul class="indexitem1submenu index-sub-menu hidden">
          <li class="indexitem2 indexitem"><a href="#">indexitem2</a><i class="fas fa-angle-down indexitem2indexarrow arrow"></i>
            <ul class="indexitem2submenu index-sub-menu-sub-menu hidden">
              <li><a href="#">lorem uipson</a></li>
              <li><a href="#">lorem upsim</a></li>
            </ul>
          </li>
          <li class="indexitem3index indexitem"><a href="#">indexitem3</a><i class="fas fa-angle-down indexitem3indexarrow arrow"></i>
            <ul class="indexitem3submenu index-sub-menu-sub-menu hidden">
              <li><a href="#">egea</a></li>
              <li><a href="#">lorem upsin</a></li>
            </ul>
          </li>
          <li class="indexitem4-index indexitem"><a href="#">indexitem4</a><i class="fas fa-angle-down indexitem4indexarrow arrow"></i>
            <ul class="indexitem4submenu index-sub-menu-sub-menu hidden">
              <li><a href="#">lorem ipson</a></li>
              <li><a href="#">loreme ipson</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</body>

我尝试使用querySelectorAll来定位索引项。前几天我一直在工作，直到我尝试将所有内容切换到querySelectorAll。

考虑这种方法：

const arrows = document.querySelectorAll('.arrow');

    arrows.forEach(arrow => {
      arrow.addEventListener('click', () => {
        const submenu = arrow.parentElement.querySelector('.index-sub-menu');
        if(submenu) submenu.classList.toggle('hidden');
      })
    })

在这里，我查询选择所有的箭头，并添加一个点击监听器，每一个点击将选择子菜单和切换隐藏类。将. js子菜单添加到子菜单元素并替换'。index-sub-menu'（仅在JS中）类在querySelector中将CSS类与JS逻辑分离。
您也可以通过向文档添加1个事件侦听器来实现这一点，如下所示：

document.addEventListener('click', (event) => {
  if(!event.target.classList.contains('arrow')) return;
  
  const submenu = event.target.parentElement.querySelector('.index-sub-menu')
    if(submenu) submenu.classList.toggle('hidden');
})

它侦听单击事件。检查事件的目标是否具有类“”。箭头’，并重复与前一示例相同的逻辑。希望这对你有帮助

css for循环无法在单击时切换

1条答案

相关问题

热门标签

最新问答