所以我有一个移动菜单,总共有 4 个泡泡。 有一个大泡泡,它是活跃的泡泡,还有 3 个半圆围绕着它。
我无法让两件事发挥作用。 使用javascript,我想为点击的那个设置事件类,这样依次变成大气泡,前一个回到半圆。 由于某种原因,我无法开始工作。
对于 css,如果我将 active 类设置在其他类上,定位就会被搞砸。 我不能让他们工作.. 希望这是有道理的...
代码笔: 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");
});
}
我已经查看了事件监听器和类列表的文档,但我无法让它工作......而且对于 css,我无法弄清楚如何让它动态定位。
任何指导帮助将不胜感激..
最佳答案
您需要为每个捕获其 click
事件的元素添加 addEventListener
,并且您可以使用 e 区分被单击的元素和该元素的其余部分。目标
您可以使用数据属性而不是 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>
关于javascript - 显示事件菜单的移动菜单样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58726010/