如何实现链接点击后保持自定义border-radius，再次点击恢复原状？

你完全找对问题根源啦！:active伪类确实只在鼠标按下的瞬间生效，松开后就会回到默认样式。要实现点击后保持圆角、再次点击恢复的切换效果，我们可以用CSS自定义类+JavaScript切换的方式来搞定，很简单的，一步步来：

1. 调整CSS样式 #

首先，我们定义一个专门的激活状态类（比如active-border），把你想要的圆角样式写在这个类里，同时给默认样式加个过渡动画让变化更平滑：

.border {
  border-radius: 10px 10px 10px 10px;
  background-color: red;
  color: white;
  /* 添加过渡动画，让圆角变化更自然 */
  transition: border-radius 0.3s ease;
}

/* 自定义激活状态类 */
.border.active-border {
  border-radius: 10px 10px 0px 0px;
}

2. 用JavaScript切换类 #

因为你已经引入了jQuery，我们可以用它的toggleClass()方法来轻松实现点击切换：

// 给目标链接绑定点击事件
$('.border').click(function(e) {
  /* 如果你不需要阻止链接的默认跳转行为（比如跳转到锚点或其他页面），
     就把下面这行注释掉 */
  e.preventDefault();
  // 切换激活类：有就移除，没有就添加
  $(this).toggleClass('active-border');
});

完整代码示例 #

把上面的代码整合到你的HTML里，最终代码大概是这样：

<!doctype html>
<html lang="en">
<head>
  <title>Hello, world!</title>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <style>
    .border {
      border-radius: 10px 10px 10px 10px;
      background-color: red;
      color: white;
      transition: border-radius 0.3s ease;
    }

    .border.active-border {
      border-radius: 10px 10px 0px 0px;
    }
  </style>
</head>
<body>
  <div class="container d-flex align-items-center">
    <div class="col-6 mt-5">
      <a class="nav-link collapsed border" href="#submenu1" data-toggle="collapse" data-target="#submenu1">Testing</a>
    </div>
  </div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/parallax.js"></script>
  <script>
    $('.border').click(function(e) {
      // e.preventDefault(); // 按需启用/禁用
      $(this).toggleClass('active-border');
    });
  </script>
</body>
</html>

不用jQuery的替代方案 #

如果你不想依赖jQuery，用原生JavaScript也能实现：

document.querySelector('.border').addEventListener('click', function(e) {
  e.preventDefault();
  this.classList.toggle('active-border');
});

这样每次点击链接，就会自动切换激活状态，圆角样式也会保持住啦～

内容的提问来源于stack exchange，提问作者KevinM