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

Question

所以我有一个移动菜单，总共有4个浮动。有一个大线轴，它是活动的，还有三个其他线轴在它周围的半圆中。

我做不到两件事。使用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，我不知道如何将其动态定位。

如有任何指导帮助，我们将不胜感激。。

Answer 1

您需要为每个元素添加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>