toggleClass的用法简介

期待mizi

于 2021-09-07 00:06:45 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端总结文章标签： html

本文链接：https://blog.youkuaiyun.com/qq_37855976/article/details/120147782

前端总结专栏收录该内容

7 篇文章

订阅专栏

该博客介绍了如何利用JavaScript中的toggleClass方法控制ZTree下拉菜单的显示与隐藏。通过点击按钮，toggleClass会根据元素是否已有'ztreeVisible'类来动态切换样式，从而实现背景颜色和可见性的变化。同时，它也调整了 Chevron 图标的显示状态。文章还附带了相关的HTML和CSS代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

toggleClass的用法就是，如果你选择的页面元素中存在class属性，那就去掉calss属性；如果不存在class属性，就添加class属性。

下面是ztree下拉选择按钮的切换跟界面的显示跟隐藏



 <div id="ztreeMenu" class="ztreeVisible" style="background-color: rgba(255, 255, 255, 0.8);position: absolute;top: 30px;left:50%">
                                <ul id="Maptree" class="ztree" style="height:100%;overflow: auto;"></ul>
                            </div>
<div class="btn-group">
                                    <button type="button" class="btn btn-default btn-sm" id="currentMapBtn"> 当前图层 : <input type="text" class="currentMapName" id="current" readonly unselectable="on" style="display: inline;padding: 0;" /></button>
                                    <button type="button" class="btn btn-default btn-sm" id="treeBtn" onclick="ztreeVisible()"><i class="fa fa-chevron-up iconVisible"></i><i class="fa fa-chevron-down"></i></button>
                                    <button type="button" class="btn btn-default btn-sm" id=""><i class="fa fa-arrows"></i> 选择</button>   
                                </div>
function ztreeVisible(){
             $("#ztreeMenu").toggleClass("ztreeVisible");
             $('#treeBtn i').toggleClass("iconVisible")
     }

css

.ztreeVisible{
            visibility: hidden;
        }
     .iconVisible{
            display: none;
        }