js实现点击div隐藏相应部分,再次点击显示

首先看一下html和css的结构:

<style>
#nav_left{
    width:120px;
    height:600px;
    background-color:#333;
    margin-left:0px;
}
.list {
    color:#fff;
    padding:10px;
    font-size:18px;
}

.list:hover{
    cursor:pointer;
    color:red;
}

.detail p{
    font-size:16px;
    right: 10px;
    padding-top:10px;
}

.detail p:hover{
    color:#fff;
}

</style>

<body>
<div class = "nav_top">
    <div class = "right">
        <img src = "./img/surf.jpg">&nbsp;&nbsp;
         <span> 欢迎:${requestScope.name}</span>
     </div>
</div>

<div id = "nav_left">

        <div class = "list">
            系统管理
            <img src="./images/heshang.png">
        </div>
        <div class = "detail">
                    <p>系统</p>
                    <p>系统</p>
                    <p>系统</p>
        </div>

        <div class = "list">
            日程管理
            <img src="./images/heshang.png">
        </div>

        <div class = "detail">
                    <p>日程管理</p>
                    <p>日程管理</p>
                    <p>日程管理</p>
        </div>

        <div class = "list">
            日报统计
            <img src="./images/heshang.png">
        </div>

        <div class = "detail">
                    <p>日报统计</p>
                    <p>日报统计</p>
                    <p>日报统计</p>
        </div>
</div>

点击list时相应的现实detail,再次点击合上,旁边还有一个小图标。
这里写图片描述

这里写图片描述

效果就是这样:
首先获得所有的list和detail,这里用自己写的一个函数获得所有的class为list和dtail的标签。
函数如下:

 unction getByClassName(obj,cls){
// obj目标元素,cls要获得的class名

var element = obj.getElementsByTagName('*');//将目标下的所有子元素获取到

var result = []; //定义一个数组,存放获得的classname = "cls" 的所有值

for(var i = 0; i< element.length; i++){

if(element[i].className == cls){

result.push(element[i]);

}

}

return result;

}

返回一个数组,接下来先获取到所有用的标签

var nav_left = document.getElementById("nav_left");
var list = getByClassName(nav_left,'list');
var img = nav_left.getElementsByTagName('img');
console.log(list);
var detail = getByClassName(nav_left,'detail');
console.log(detail);


//主要的函数
function dianji(){
//先初始化所有的detail显示为none,利用立即调用函数为每一个绑定所有的detail显示为none;
for (var i = 0; i < detail.length; i++) {
    (function(index){
        detail[index].style.display = "none";
    })(i);
    }

//在利用立即调用函数为每一个list绑定点击事件
for(var i = 0; i< list.length; i++){
    (function(value){
        list[value].onclick = function(){
             toggle(detail[value],img[value]);
        }
        })(i);
    }
}
dianji();

//使用toggle()函数进行判断,为每一个detail添加相应的动作。
function toggle(element,img){
    if(element.style.display == "none"){
        element.style.display = "block";
        img.src = "./images/zhankai.png";
    }
    else if(element.style.display == "block"){
            element.style.display = "none";
            img.src = "./images/heshang.png";
        }
    else{
        alert('chucuo');
    }
}

下面附上完整的源码


<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8"/>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>成功页</title>
<style type="text/css">
    @CHARSET "UTF-8";
*{
    margin:0px;
    padding:0px;
}
div.nav_top{
    width:100%;
    height:60px;
    background-color:#333;
}

.nav_top .right{
    float:right;
    margin-right:100px;
}
.nav_top img{
    width:50px;
    height:50px;
    border-radius:25px;
    background-color:#fff;
    border:0;
}
.nav_top span{
    line-height:60px;
    color:#fff;
    font-size:16px;
    font-weight:blod;

}


#nav_left{
    width:120px;
    height:600px;
    background-color:#333;
    margin-left:0px;
}
.list {
    color:#fff;
    padding:10px;
    font-size:18px;
}

.list:hover{
    cursor:pointer;
    color:red;
}

.detail p{
    font-size:16px;
    right: 10px;
    padding-top:10px;
}

.detail p:hover{
    color:#fff;
}

</style>
</head>
<body>
<div class = "nav_top">
    <div class = "right">
        <img src = "./img/surf.jpg">&nbsp;&nbsp;
         <span> 欢迎:${requestScope.name}</span>
     </div>
</div>

<div id = "nav_left">

        <div class = "list">
            系统管理
            <img src="./images/heshang.png">
        </div>
        <div class = "detail">
                    <p>系统</p>
                    <p>系统</p>
                    <p>系统</p>
        </div>


        <div class = "list">
            日程管理
            <img src="./images/heshang.png">
        </div>

        <div class = "detail">
                    <p>日程管理</p>
                    <p>日程管理</p>
                    <p>日程管理</p>
        </div>



        <div class = "list">
            日报统计
            <img src="./images/heshang.png">
        </div>

        <div class = "detail">
                    <p>日报统计</p>
                    <p>日报统计</p>
                    <p>日报统计</p>
        </div>


</div>


<script src = "./layui/layui/layui.js"></script>
<script>

var nav_left = document.getElementById("nav_left");
var list = getByClassName(nav_left,'list');
var img = nav_left.getElementsByTagName('img');
console.log(list);
var detail = getByClassName(nav_left,'detail');
console.log(detail);


function dianji(){
for (var i = 0; i < detail.length; i++) {
    (function(index){
        detail[index].style.display = "none";
    })(i);
    }
for(var i = 0; i< list.length; i++){
    (function(value){
        list[value].onclick = function(){

             toggle(detail[value],img[value]);
        }
        })(i);
    }
}
dianji();
function toggle(element,img){
    if(element.style.display == "none"){
        element.style.display = "block";
        img.src = "./images/zhankai.png";
    }
    else if(element.style.display == "block"){
            element.style.display = "none";
            img.src = "./images/heshang.png";
        }
    else{
        alert('chucuo');
    }
}


function getByClassName(obj,cls){
// obj目标元素,cls要获得的class名

var element = obj.getElementsByTagName('*');//将目标下的所有子元素获取到

var result = []; //定义一个数组,存放获得的classname = "cls" 的所有值

for(var i = 0; i< element.length; i++){

if(element[i].className == cls){

result.push(element[i]);

}

}

return result;

}
</script>
</body>
</html>
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/csdn_zsdf/article/details/76686292
上一篇jsp+javaBean+servlet+mysql完整的实现一个登录功能
下一篇浏览器的缓存机制
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭