前端交互隐藏显示等切换状态的优化点

在前端交互过程中，经常会遇到div层级的显示与隐藏--场景包括弹窗，弹窗嵌套部分隐藏部分显示等等，而处理方法不外乎js和css

js：dom.show()、dom.hide()

css：通过js添加相关类名（.show{display:block}/.hide{display:none}）

然而这两种方法都有局限性

js：不可拓展，如果要在显示的同时添加部分特效或者父级显示同时子级添加特效

css：类名的的不可拓展，添加额外特效css中可以直接添加，但是这个类名就不符合内容描述了，show和hide

所以综上，可以对父级添加类名而对应控制子级，例：

.box h1{display: none;}
.box.active h1{display: block;}
.box.active h2{display: none;}

<div class="box">
    <h1>我是h1</h1>
    <h2>我是h2</h2>
</div>
<a href="#">switch</a>

以往的控制box下h1和h2显示与隐藏的方法，就可以通过给父级box添加类名就行

$('.box').addClass('active') or $('.box').removeClass('active');

拓展的特效等也可以在active下关联，这就节省了阅读和编辑的工作量，并且拓展性更强

转载于:https://www.cnblogs.com/hulalalastar/p/6509011.html