用于显示索引项的循环不起作用

问题描述 投票：0回答：1

如何在不在 javascript 中创建大型数组的情况下使用 for 循环打开和关闭它们？这只是我制作的一个小示例，目的是让您了解我正在尝试做什么，我希望它足够清楚。我也想使用 querySelectorAll 和 for 循环旋转箭头。请帮忙。 https://jsfiddle.net/efm2qj1u/

// Index //
const indexItemArrows = document.querySelectorAll('ul.index-itself > li > .arrow');
const indexItemSubmenus = document.querySelectorAll('ul.index-itself > .index-sub-menu > li > .index-sub-menu');
const indexItemSubmenuArrows = document.querySelectorAll('ul.index-itself > .index-sub-menu > li > .arrow');
const indexItemSubmenuSubmenus = document.querySelectorAll('.ul.index-itself > .index-sub-menu > li > .index-sub-menu-sub-menu');

//index li items

const indexItemRotateArrowLoop = () => {
  for (i = 0; i < cablesIndexItemArrows.length; i++);
  cablesIndexItemArrows[i].classList.toggle('rotatearrow');
};

// open and close submenus

const indexOpenSubmenuLoop = () => {
  for (i = 0; i < cablesIndexItemSubmenus.length; i++);
  cablesIndexItemSubmenus[i].classList.toggle('hidden');
};

const indexCloseSubmenuLoop = () => {
  for (i = 0; i < indexItemSubmenus.length; i++);
  if (!IndexItemSubmenus[i].classList.contains('hidden')) {
    this.classList.add('hidden');
  }
};
const indexSubmenuItemRotateArrowBackLoop = () => {
  for (i = 0; i < indexItemSubmenuArrows.length; i++);
  if (indexItemSubmenuArrows[i].classList.contains('rotatearrow')) {
    this.classList.toggle('rotatearrow');
  }
};

// open and close submenus submenus

const indexOpenSubmenuSubmenuLoop = () => {
  for (i = 0; i < indexItemSubmenuSubmenus.length; i++);
  if (indexItemSubmenuSubmenus[i].classList.contains('hidden')) {
    this.classList.remove('hidden');
  }
};


indexItemArrows.addEventListener('click', () => {
  indexItemRotateArrowLoop();
  indexSubmenuItemRotateArrowBackLoop();
  indexCloseSubmenuLoop();
});
@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/[email protected]/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="index-sub-menu index-sub-menu hidden">
          <li class="indexitem2 indexitem"><a href="#">indexitem2</a><i class="fas fa-angle-down indexitem2indexarrow arrow"></i>
            <ul class="indexitem2-index-sub-menu 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="indexitem3-index-sub-menu index-sub-menu-sub-menu hidden">
              <li><a href="#">egea</a></li>
              <li><a href="#">lorem upsin</a></li>
              <li><a href="#">loren ipson</a></li>
              <li><a href="#">lormem imspon</a></li>
              <li><a href="#">lorem ipson</a></li>
              <li><a href="#">loren ispons</a></li>
            </ul>
          </li>
          <li class="indexitem4-index indexitem"><a href="#">indexitem4</a><i class="fas fa-angle-down indexitem4indexarrow arrow"></i>
            <ul class="indexitem4-index-sub-menu index-sub-menu-sub-menu hidden">
              <li><a href="#">lorem ipson</a></li>
              <li><a href="#">loreme ipson</a></li>
              <li><a href="#">lorem ispon</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="indexitem5-index indexitem"><a href="#"><strong>indexitem5</strong></a><i class="fas fa-angle-down indexitem5arrow arrow"></i>
        <ul class="indexitem5-index-sub-menu hidden">
          <li class="indexitem6-index indexitem"><a href="#">indexitem6</a><i class="fas fa-angle-down indexitem6indexarrow arrow"></i>
            <ul class="indexitem6-index-sub-menu index-sub-menu-sub-menu hidden">
              <li><a href="#">lreem</a></li>
              <li><a href="#">rekfgj</a></li>
              <li><a href="#">erkefj</a></li>
              <li><a href="#">lropem</a></li>
            </ul>
          </li>
          <li class="indexitem7-index indexitem"><a href="#">indexitem7</a><i class="fas fa-angle-down indexitem7indexarrow arrow"></i>
            <ul class="indexitem7-index-sub-menu index-sub-menu-sub-menu hidden">
              <li><a href="#">lorem ipson</a></li>
              <li><a href="#">lorem ipson</a></li>
              <li><a href="#">lorem ipson</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</body>

我最关心的是让 for 循环工作，如果你能给我一个例子就好了。我尝试添加一个父元素查找器然后添加子节点查找器以在箭头单击时定位子菜单。

javascript html css menu submenu
1个回答
0
投票

如上所述

indexItemArrows is a NodeList object, which has no .addEventListener() method
你必须使用forEach循环来使用这个特性。

这是更新js，

indexItemArrows.forEach((e) => {
  e.addEventListener('click', () => {
      indexItemRotateArrowLoop();
      indexSubmenuItemRotateArrowBackLoop();
      indexCloseSubmenuLoop();
   });

这是整体代码。

// Index //
const indexItemArrows = document.querySelectorAll('ul.index-itself > li > .arrow');
const indexItemSubmenus = document.querySelectorAll('ul.index-itself > .index-sub-menu > li > .index-sub-menu');
const indexItemSubmenuArrows = document.querySelectorAll('ul.index-itself > .index-sub-menu > li > .arrow');
const indexItemSubmenuSubmenus = document.querySelectorAll('.ul.index-itself > .index-sub-menu > li > .index-sub-menu-sub-menu');

//index li items
const indexItemRotateArrowLoop = ()=> {
  for(i = 0; i < cablesIndexItemArrows.length; i++);
  cablesIndexItemArrows[i].classList.toggle('rotatearrow');
};

// open and close submenus

const indexOpenSubmenuLoop = ()=> {
  for(i = 0; i < cablesIndexItemSubmenus.length; i++);
 cablesIndexItemSubmenus[i].classList.toggle('hidden'); 
};

const indexCloseSubmenuLoop = ()=> {
  for(i = 0; i < indexItemSubmenus.length; i++);
  if (!IndexItemSubmenus[i].classList.contains('hidden')){
    this.classList.add('hidden');
}};
const indexSubmenuItemRotateArrowBackLoop = ()=> {
  for(i = 0; i < indexItemSubmenuArrows.length; i++);
  if (indexItemSubmenuArrows[i].classList.contains('rotatearrow')){
    this.classList.toggle('rotatearrow');
}};

// open and close submenus submenus

const indexOpenSubmenuSubmenuLoop = ()=> {
  for(i = 0; i < indexItemSubmenuSubmenus.length; i++);
  if (indexItemSubmenuSubmenus[i].classList.contains('hidden')){
    this.classList.remove('hidden');
}};


indexItemArrows.forEach((e) => {
  e.addEventListener('click', () => {
  indexItemRotateArrowLoop();
  indexSubmenuItemRotateArrowBackLoop();
  indexCloseSubmenuLoop();
});
});
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

.contentbox .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/[email protected]/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="index-sub-menu index-sub-menu hidden">
              <li class="indexitem2 indexitem"><a href="#">indexitem2</a><i class="fas fa-angle-down indexitem2indexarrow arrow"></i>
                <ul class="indexitem2-index-sub-menu 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="indexitem3-index-sub-menu index-sub-menu-sub-menu hidden">
                  <li><a href="#">egea</a></li>
                  <li><a href="#">lorem upsin</a></li>
                  <li><a href="#">loren ipson</a></li>
                  <li><a href="#">lormem imspon</a></li>
                  <li><a href="#">lorem ipson</a></li>
                  <li><a href="#">loren ispons</a></li>
                </ul>
              </li>
              <li class="indexitem4-index indexitem"><a href="#">indexitem4</a><i class="fas fa-angle-down indexitem4indexarrow arrow"></i>
                <ul class="indexitem4-index-sub-menu index-sub-menu-sub-menu hidden">
                  <li><a href="#">lorem ipson</a></li>
                  <li><a href="#">loreme ipson</a></li>
                  <li><a href="#">lorem ispon</a></li>
                </ul>
              </li>
            </ul>      
          </li>
          <li class="indexitem5-index indexitem"><a href="#"><strong>indexitem5</strong></a><i class="fas fa-angle-down indexitem5arrow arrow"></i>
            <ul class="indexitem5-index-sub-menu hidden">
            <li class="indexitem6-index indexitem"><a href="#">indexitem6</a><i class="fas fa-angle-down indexitem6indexarrow arrow"></i>
                <ul class="indexitem6-index-sub-menu index-sub-menu-sub-menu hidden">
                  <li><a href="#">lreem</a></li>
                  <li><a href="#">rekfgj</a></li>
                  <li><a href="#">erkefj</a></li>
                  <li><a href="#">lropem</a></li>
                </ul>
              </li>
              <li class="indexitem7-index indexitem"><a href="#">firmware</a><i class="fas fa-angle-down indexitem7indexarrow arrow"></i>
                <ul class="indexitem7-index-sub-menu index-sub-menu-sub-menu hidden">
                  <li><a href="#">lorem ipson</a></li>
                  <li><a href="#">lorem ipson</a></li>
                  <li><a href="#">lorem ipson</a></li>
                </ul>
              </li>
            </ul>
          </li>  
        </ul>
      </div>
      </body>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.