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

2024-05-19 • 问答

所以我有一个移动菜单，共有4个气泡。有一个大泡泡是活跃的，而另外三个则是半圆的。

我无法完成两件事。使用javascript，我想为单击的对象设置活动类，以便依次变成大气泡，而前一个则返回半圆。由于某种原因，我无法上班。

如果我将活动类设置为其他类，则使用css时，定位会被拧紧。我不能让他们上班.. 希望这有意义...

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");
  });
}

我已经浏览了eventlistener和classlist的文档，但是我无法使其正常工作……而使用CSS，我无法弄清楚如何使其动态定位。

任何指导帮助都将不胜感激。

您需要为每个捕获其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>

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

zhangmhua87 回答：移动菜单样式显示活动菜单

大家都在问