点击顶行栏图标实现切换与隐藏

点击顶行栏图标实现切换与隐藏

<div id="divXianShi">
    点击切换隐藏
</div>
<div id="rightJianTou" οnclick="dianji()">
    <img src="../image/close-16x16.png" alt="">
</div>
<script type="text/javascript">
    var divXianShi = document.getElementById("divXianShi");
    //获取图标
    var myImg = document.getElementById("rightJianTou").firstElementChild;
   
    function dianji() {
        if (myImg.getAttribute("src")=="../image/close-16x16.png"){
            divXianShi.style.transform="translateY(-50px)";
            divXianShi.style.transition="all .2s linear";
            //在执行完隐藏盒子后，将图片替换为下箭头的图标
            myImg.src="../image/down-arr-16x16.png";
        }
        else {
            divXianShi.style.transform="translateY(0px)";
            divXianShi.style.transition="all .2s linear";
            myImg.src="../image/close-16x16.png";
        }
    }

css样式

#divXianShi{
    color: white;
    height: 50px;
    line-height: 50px;
    text-align: center;
    position: relative;
    background-color: rgb(0,128,0);
}
#rightJianTou{
    width: 40px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    position: absolute;
    top: 0;
    right: 0;
    background-color:rgb(0,128,0) ;
}