toggleClass的用法简介

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;
        }