时间戳

首页 > 解决方案 > 移动菜单样式以显示活动菜单

javascript - 移动菜单样式以显示活动菜单

问题描述

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

我无法完成两件事。使用 javascript 我想为单击的那个设置活动类，这样依次变成大气泡，前一个回到半圆。由于某种原因，我无法开始工作。

并且使用 css，如果我将活动类设置在其他类上，则定位是错误的。我不能让他们工作..希望这是有道理的......

代码笔： 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");
  });
}

我查看了 eventlistener 和 classlist 的文档，但我无法让它工作......而且使用 css，我无法弄清楚如何让它动态定位。

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

标签： javascriptcssmobilemenu

解决方案

您需要addEventListener为每个元素添加捕获其click事件，并且您可以区分单击的元素和元素的其余部分使用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>

推荐阅读