显示活动菜单的移动菜单样式

Question

所以我有一个移动菜单，总共有 4 个泡泡。有一个大泡泡，它是活跃的泡泡，还有 3 个半圆围绕着它。

我无法让两件事发挥作用。使用 javascript 我想为点击的那个设置活动的 class 以便依次变成大气泡，前一个返回半圆。由于某种原因，我无法开始工作。

而对于 css，如果我将活动 class 设置在其他一些上，定位就会被拧紧。我不能让他们工作.. 希望这是有道理的...

Codepen: https://codepen.io/andrelange91/pen/bGGvjvx

Html

<nav class="navigation navigation--active">
  <a class="navigation__item navigation__item--inactive">1</a>
  <a class="navigation__item navigation__item--inactive">2</a>
  <a class="navigation__item navigation__item--inactive">3</a>
  <a class="navigation__item navigation__item--active">4</a>
</nav>

Css

.navigation{
  position:fixed;
  right:20px;
  bottom:20px;
  width:100px;
  height:100px;
  .navigation__item{
    padding:10px;
    background-color:green;
    color:white;
    border-radius:50%;
    position:absolute;
    &--active{
      z-index:10;
    }
  }
  &.navigation--active{
      .navigation__item{
        &--inactive{
          &:nth-child(1){
            background-color:purple;
            right: 30px;
            top: 0px;
          }
          &:nth-child(2){
            background-color:blue;
            left:10px;
            top:20px;
          }
          &:nth-child(3){
            background-color:black;
            bottom:0;
            left:10px;
          }
        }
        &--active{
          background-color:red;
          padding:20px;
          right:0;
          bottom:0;
        }

      }
    }
}

最后是我的javascript

const elementsArray = document.getElementsByClassName("navigation__item");

for (var i = 0; i < elementsArray.length; i++) {
  elementsArray[i].addEventListener("click", function(e){
    console.log(i);
      elementsArray[i].classList.remove("navigation__item--inactive");
      elementsArray[i].classList.add("navigation__item--active");
  });
}

我已经查看了事件侦听器和 classlist 的文档，但我无法让它工作...而且对于 css，我不知道如何获得它动态定位。

任何指导帮助将不胜感激..

Answer 1

您需要为每个捕获其 click 事件的元素添加 addEventListener，您可以使用 e.target 区分被单击的元素和元素的其余部分您可以使用数据属性而不是 nth-child 这样您就可以重新排序数字

const elementsArray = document.getElementsByClassName("navigation__item");
const inactiveElementsArray = document.getElementsByClassName("navigation__item--inactive");
for (var i = 0; i < elementsArray.length; i++) {
    elementsArray[i].addEventListener('click', changeSize, false);
  
}
function changeSize(e){
  for (var i = 0; i < elementsArray.length; i++) {
    elementsArray[i].classList.remove("navigation__item--active");
    elementsArray[i].classList.add("navigation__item--inactive");
  }
  e.target.classList.remove("navigation__item--inactive");
  e.target.classList.add("navigation__item--active");
  e.target.setAttribute('data-position', "main");
  elementsOrder();
}
function elementsOrder(){
  for (var i = 0; i < inactiveElementsArray.length; i++) {
    inactiveElementsArray[i].setAttribute('data-position', i);
  }

}

.navigation {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 100px;
  height: 100px;
}
.navigation .navigation__item {
  padding: 10px;
  background-color: green;
  color: white;
  border-radius: 50%;
  position: absolute;
}
.navigation .navigation__item--active {
  z-index: 10;
}
.navigation__item--inactive[data-position="0"] {
  background-color: purple;
  right: 30px;
  top: 0px;
}
.navigation__item--inactive[data-position="1"] {
  background-color: blue;
  left: 10px;
  top: 20px;
}
.navigation__item--inactive[data-position="2"] {
  background-color: black;
  bottom: 0;
  left: 10px;
}
.navigation.navigation--active .navigation__item--active {
  background-color: red;
  padding: 20px;
  right: 0;
  bottom: 0;
}

<nav class="navigation navigation--active">
  <a class="navigation__item navigation__item--inactive" data-position="0">1</a>
  <a class="navigation__item navigation__item--inactive" data-position="1">2</a>
  <a class="navigation__item navigation__item--inactive" data-position="2">3</a>
  <a class="navigation__item navigation__item--active" data-position="main">4</a>
</nav>

显示活动菜单的移动菜单样式

Mobile menu styling to display the active one

javascript

css

mobile

menu