子菜单CSS和Java脚本的问题

Question

我的子菜单有问题。我实现了打开和关闭它的效果，但我面临菜单下方剩余项目的问题。我的意思是，我希望项目编号 3 及以下项目在子菜单打开时向下移动，在子菜单关闭时向上移动。我在我的代码中就是这样做的。我面临的问题是，在不同的设备（即平板电脑）上，剩余的菜单项被搞乱了。

subArrow.addEventListener('click', () => {
  submenu.classList.toggle('active');
  remaining.classList.toggle('active');

});

&__subMenu {
  display: none;
  position: absolute;
  top: 100%;
  width: 100%;
  background-color: #fff;
  z-index: 10;
  opacity: 0;
  transform: translateY(-10px);
}

&__subMenu.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

&__subMenu a {
  display: block;
  font-family: 'Futura';
  padding-left: 36px;
  font-weight: 100;
  margin: 0px 0 0 0;
  font-size: 18px;
  // padding-top: 7px;
  color: #373e41;
  line-height: 40px;
  text-decoration: none;
  text-transform: capitalize;
}

&__remainingMenu {
  margin-top: 0;
}

&__remainingMenu.active {
  margin-top: 20%;
}

<div class="b-headerMobile__navMenu">
  <div>
    <a class="b-headerMobile__a">Item1</a>
  </div>
  <hr>
  <div class="b-headerMobile__technology">
    <a class="b-headerMobile__a">Item2</a>
    <img src="./images/chevron-right.svg" alt="arrow" class="b-  headerMobile__techArrow">
    <div class="b-headerMobile__subMenu">
      <a href="">sub 1</a>
      <hr>
      <a href="">sub 2</a>
      <hr>
      <a href="">sub 3</a>
      <hr>
      <a href="">sub 4</a>
      <hr>
    </div>
  </div>
  <hr>
  <div class="b-headerMobile__remainingMenu">
    <a class="b-headerMobile__a ">Item 3</a>
  </div>
  <hr>
  <div class="b-headerMobile__remainingMenu">
    <a class="b-headerMobile__a ">Item 4</a>
  </div>
  <hr>
  <div class="b-headerMobile__remainingMenu">
    <a class="b-headerMobile__a ">Item 5</a>
  </div>
  <hr>
</div>

我非常感谢您的帮助。

Answer 1

希望这就是您正在寻找的...这是基于您提供的信息。我希望我的理解是正确的，其中您遇到了错误，如您分享的

jsfiddle

中所示。

const subArrow = document.querySelector('.b-headerMobile__techArrow');
const submenu = document.querySelector('.b-headerMobile__subMenu');
const remainingMenuGroup = document.querySelector('.b-headerMobile__remainingMenuGroup');

subArrow.addEventListener('click', () => {
  submenu.classList.toggle('active');
  remainingMenuGroup.classList.toggle('active');
});

.b-headerMobile__subMenu {
  display: none;
  position: absolute;
  top: 100%;
  width: 100%;
  background-color: #fff;
  z-index: 10;
  opacity: 0;
  transform: translateY(-10px);
}

.b-headerMobile__subMenu.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.b-headerMobile__subMenu a {
  display: block;
  font-family: 'Futura';
  padding-left: 36px;
  font-weight: 100;
  margin: 0px 0 0 0;
  font-size: 18px;
  color: #373e41;
  line-height: 40px;
  text-decoration: none;
  text-transform: capitalize;
}

.b-headerMobile__remainingMenuGroup {
  margin-top: 0;
  transition: margin-top 0.3s ease;
}

.b-headerMobile__subMenu.active~.b-headerMobile__remainingMenuGroup {
  margin-top: 100px;
  /* Adjust this value as needed */
}

.b-headerMobile__remainingMenu {
  margin-top: 0;
  transition: margin-top 0.3s ease;
}

.b-headerMobile__remainingMenu.active {
  margin-top: 20px;
  /* Adjust this value as needed */
}


/*Add other Styles as necessary after this */

  <div class="b-headerMobile__navMenu">
    <div>
      <a class="b-headerMobile__a">Item1</a>
    </div>
    <hr>
    <div class="b-headerMobile__technology">
      <a class="b-headerMobile__a">Item2</a>
      <img src="./images/chevron-right.svg" alt="arrow" class="b-headerMobile__techArrow">
      <div class="b-headerMobile__subMenu">
        <a href="">sub 1</a>
        <hr>
        <a href="">sub 2</a>
        <hr>
        <a href="">sub 3</a>
        <hr>
        <a href="">sub 4</a>
        <hr>
      </div>
    </div>
    <div class="b-headerMobile__remainingMenuGroup">
      <div class="b-headerMobile__remainingMenu">
        <a class="b-headerMobile__a">Item 3</a>
      </div>
      <hr>
      <div class="b-headerMobile__remainingMenu">
        <a class="b-headerMobile__a">Item 4</a>
      </div>
      <hr>
      <div class="b-headerMobile__remainingMenu">
        <a class="b-headerMobile__a">Item 5</a>
      </div>
    </div>
  </div>

Answer 2

Javascript

  const subArrow = document.querySelector('.b-headerMobile__techArrow');
  const submenu = document.querySelector('.b-headerMobile__subMenu');
  const remainingMenus = document.querySelectorAll('.b-headerMobile__remainingMenu');

subArrow.addEventListener('click', () => {
  submenu.classList.toggle('active');
  for (const remainingMenu of remainingMenus) {
    remainingMenu.classList.toggle('active');
  }
});

CSS

&__remainingMenu {
  margin-top: 0;
  transition: margin-top 0.3s ease-in-out; /* Add a transition for smooth animation */
}

&__remainingMenu.active {
  margin-top: 20%; /* Adjust this value as needed */
}