通过在单击元素时添加类名并在外部单击时删除来切换类

在开发 web 应用程序时，常常需要根据用户交互来动态地增加或删除类名。其中，一种非常常见的需求是，当用户单击一个元素时，添加一个类名；当用户在元素之外单击时，删除该类名。

本文将通过示例代码来演示如何实现这个功能。

实现步骤

1. 获取需要添加或删除类名的元素。

   const el = document.querySelector('.my-element');
   

2. 给元素添加事件监听器，以便在单击元素时处理事件。

   el.addEventListener('click', function() {
     // 处理事件
   });
   

3. 在事件处理程序中，判断元素是否已经有指定的类名。

   if (el.classList.contains('my-class')) {
     // 在这里删除类名
   } else {
     // 在这里添加类名
   }
   

4. 如果元素已经有类名，则删除它。

   el.classList.remove('my-class');
   

5. 如果元素没有类名，则添加它。

   el.classList.add('my-class');
   

6. 最后，在文档的其他部分添加事件监听器，以便在单击其他地方时删除类名。

   document.addEventListener('click', function(event) {
     if (!event.target.matches('.my-element')) {
       el.classList.remove('my-class');
     }
   });
   

完整代码

const el = document.querySelector('.my-element');
el.addEventListener('click', function() {
  if (el.classList.contains('my-class')) {
    el.classList.remove('my-class');
  } else {
    el.classList.add('my-class');
  }
});
document.addEventListener('click', function(event) {
  if (!event.target.matches('.my-element')) {
    el.classList.remove('my-class');
  }
});

总结

以上就是通过在单击元素时添加类名并在外部单击时删除来切换类的完整实现步骤。需要注意的是，代码中的类名和选择器应该与实际情况相符合。如果需要，也可以使用其他的事件及其对应的处理程序来实现类似的交互效果。