博客

当元素被点击时，通过添加类名来切换类，当点击外部时，删除类

  • Post category:jquery

要通过添加和删除类名来切换样式，需要使用JavaScript来实现。具体步骤分为以下几个：

  1. 获取需要进行添加和删除操作的元素：可以通过getElementById()、getElementsByClassName()或querySelector()等获取。

  2. 给目标元素添加事件：使用addEventListener()方法，为目标元素添加事件，因为添加和删除类名的动作是在交互过程中完成的，所以我们需要捕获目标元素的单击事件。

  3. 定义事件处理函数：当目标元素被点击时，处理函数首先需要判断是否已经为目标元素添加了需要切换的类名，如果添加了需要切换的类名，则执行删除操作，否则执行添加操作。

  4. 判断是否为目标元素内部的事件：当用户单击目标元素内部时，事件也会冒泡到父级元素，这时需要判断是否单击的是目标元素内部的子元素，如果是，则不执行删除类名的操作。

  5. 删除类名：在目标元素外部单击时，需要删除目标元素已经添加的类名。

下面是两个示例，详细讲解了如何通过添加和删除类名来实现样式切换的过程。

示例一：

HTML结构：

<div class="box">
    <button id="btn">切换样式</button>
</div>

CSS样式：

.box {
    width: 200px;
    height: 200px;
    background-color: #ccc;
}
.box.active {
    background-color: #f00;
}

JavaScript代码：

var box = document.querySelector('.box');
var btn = document.getElementById('btn');

btn.addEventListener('click', function (event) {
    if (box.className.indexOf('active') > -1) {
        box.classList.remove('active');
    } else {
        box.classList.add('active');
    }
});

document.addEventListener('click', function (event) {
    if (!box.contains(event.target)) {
        box.classList.remove('active');
    }
});

上述代码中，当点击按钮时，如果.box元素没有active类名，则添加active类名，反之则删除active类名。而对于点击.box之外的区域，则直接删除box元素的active类名。

示例二：

HTML结构：

<div class="box2">
    <button id="btn2">切换样式</button>
    <ul class="menu">
        <li>选项1</li>
        <li>选项2</li>
        <li>选项3</li>
    </ul>
</div>

CSS样式：

.box2 {
    width: 200px;
    height: 200px;
    background-color: #ccc;
}
.box2.active .menu {
    display: block;
}
.menu {
    display: none;
}

JavaScript代码：

var box2 = document.querySelector('.box2');
var btn2 = document.getElementById('btn2');
var menu = document.querySelector('.menu');

btn2.addEventListener('click', function (event) {
    if (box2.className.indexOf('active') === -1) {
        box2.classList.add('active');
    } else {
        box2.classList.remove('active');
    }
});

document.addEventListener('click', function (event) {
    if (!box2.contains(event.target)) {
        box2.classList.remove('active');
    }
});

menu.addEventListener('click', function (event) {
    event.stopPropagation();
});

上述代码中，同样是通过添加和删除类名的方式修改样式，但是和示例一不同的是，示例二中有一个下拉菜单，需要特别注意用户单击下拉菜单的时候，不要触发删除类名的操作。因此我们需要在菜单的单击事件处理函数中添加 event.stopPropagation()方法，用来阻止事件冒泡。

Tags: