点击激活和取消CSS过渡效果

Question

点击激活和取消CSS过渡效果

3

我已经制作了一个包含6个元素的简单侧边导航菜单。以下是我的要求示例：

我点击第一个元素，菜单从2vh增长到4vh，并改变颜色（过渡效果）。
然后我点击第二个元素，第二个元素会增长，而第一个元素则会缩小（恢复原始样式）。
如果我再次点击第二个元素，我希望它也能恢复到正常样式。其他元素也是如此。

function scale() {
  const element = document.getElementById('nav1');
  element.classList.add('navmenu-clicked');
}

.navmenu {
  color: #213362;
  font-size: 2vh;
  position: fixed;
  left: 2%;
  text-decoration: none;
  cursor: default;
  font-family: Arial, Helvetica, sans-serif;
  transition: all 2s;
}

.navmenu-clicked {
  color: red;
  font-size: 4vh;
}

#nav1 {
  top: 30%;
}

#nav2 {
  top: 40%;
}

#nav3 {
  top: 50%;
}

#nav4 {
  top: 60%;
}

#nav5 {
  top: 70%;
}

#nav6 {
  top: 80%;
}

.panel1,
.panel2 {
  height: 100vh;
}

.panel1 {
  background-color: red;
}

.panel2 {
  background-color: blue;
}

<a class="navmenu" id="nav1" href="#" onclick="scale()">menu1</a>
<a class="navmenu" id="nav2" href="#" onclick="scale()">menu2</a>
<a class="navmenu" id="nav3" href="#" onclick="scale()">menu3</a>
<a class="navmenu" id="nav4" href="#" onclick="scale()">menu4</a>
<a class="navmenu" id="nav5" href="#" onclick="scale()">menu5</a>
<a class="navmenu" id="nav6" href="#" onclick="scale()">menu6</a>

我希望我已经讲得很清楚了。谢谢！

- Simeon Nenov

2个回答

1

如果我理解正确，您想一次只突出显示一个链接，并在单击时切换活动链接样式。请参见以下修改后的代码片段以及我的JS片段中的注释。请注意，我使用事件委托来处理点击事件，这是处理此类场景的标准方式。

let activeLink = null;
document.body.addEventListener("click", e => {
  // First reset class of current active link (if it's not null)
  if (activeLink) {
    activeLink.classList.remove("navmenu-clicked");
  }

  const link = e.target;
  if (link === activeLink) {
    // Clicked on an active link 
    activeLink = null;
  } else {
    activeLink = link;
    activeLink.classList.add("navmenu-clicked");
  }
});

.navmenu {
  color: #213362;
  font-size: 2vh;
  position: fixed;
  left: 2%;
  text-decoration: none;
  cursor: default;
  font-family: Arial, Helvetica, sans-serif;
  transition: all 2s;
}

.navmenu-clicked {
  color: red;
  font-size: 4vh;
}

#nav1 {
  top: 30%;
}

#nav2 {
  top: 40%;
}

#nav3 {
  top: 50%;
}

#nav4 {
  top: 60%;
}

#nav5 {
  top: 70%;
}

#nav6 {
  top: 80%;
}

.panel1,
.panel2 {
  height: 100vh;
}

.panel1 {
  background-color: red;
}

.panel2 {
  background-color: blue;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>Document</title>
</head>

<body>
  <a class="navmenu" id="nav1" href="#">menu1</a>
  <a class="navmenu" id="nav2" href="#">menu2</a>
  <a class="navmenu" id="nav3" href="#">menu3</a>
  <a class="navmenu" id="nav4" href="#">menu4</a>
  <a class="navmenu" id="nav5" href="#">menu5</a>
  <a class="navmenu" id="nav6" href="#">menu6</a>
  <script src="app.js"></script>
</body>

</html>

- Bogdan Malizhev

非常感谢！这也解决了我的第三个目标！完美！ - Simeon Nenov

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pete · Accepted Answer

你可以将this传入onclick中，这样你只需要添加/删除被点击元素的类，并使用querySelector来删除已点击元素的类（如果不是当前点击的元素）- 代码中有注释解释发生了什么。

function scale(element) {
  if (element.classList.contains('navmenu-clicked')) {
    // check if clicked element has already been clicked - if so remove class
    element.classList.remove('navmenu-clicked');
  } else {
    const clicked = document.querySelector('.navmenu-clicked');
    if (clicked) {
      // check if there is a clicked element and remove the class if there is
      clicked.classList.remove('navmenu-clicked');
    }

    // add class to clicked element
    element.classList.add('navmenu-clicked');
  }
}

.navmenu {
  color: #213362;
  font-size: 2vh;
  position: fixed;
  left: 2%;
  text-decoration: none;
  cursor: default;
  font-family: Arial, Helvetica, sans-serif;
  transition: all 2s;
}

.navmenu-clicked {
  color: red;
  font-size: 4vh;
}

#nav1 {
  top: 30%;
}

#nav2 {
  top: 40%;
}

#nav3 {
  top: 50%;
}

#nav4 {
  top: 60%;
}

#nav5 {
  top: 70%;
}

#nav6 {
  top: 80%;
}

.panel1,
.panel2 {
  height: 100vh;
}

.panel1 {
  background-color: red;
}

.panel2 {
  background-color: blue;
}

<a class="navmenu" id="nav1" href="#" onclick="scale(this)">menu1</a>
<a class="navmenu" id="nav2" href="#" onclick="scale(this)">menu2</a>
<a class="navmenu" id="nav3" href="#" onclick="scale(this)">menu3</a>
<a class="navmenu" id="nav4" href="#" onclick="scale(this)">menu4</a>
<a class="navmenu" id="nav5" href="#" onclick="scale(this)">menu5</a>
<a class="navmenu" id="nav6" href="#" onclick="scale(this)">menu6</a>