核心提示：一、关于 原生js获取上一个兄弟节点 以及子节点的问题1.获得上一个兄弟节点previousElementSibling 这个方法 可以获得2.获取第一个子节点子节点要先全部获取，然后排除 text元...
一、关于 原生js获取上一个兄弟节点 以及子节点的问题
1.获得上一个兄弟节点
previousElementSibling 这个方法 可以获得
2.获取第一个子节点
子节点要先全部获取，然后排除 text元素，然后在获取第一个子节点
3.原生js 修改样式
不能用setattribute 要用obj.className = "Triangle";//替换样式 obj.className += " "+ "Triangle";//追加样式
二、利用纯CSS画图标
三、代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script type="text/javascript">
function f(str){
//当前节点
var sub_menu = document.getElementById(str);
//当前节点的上一个兄弟节点
var cjn =sub_menu.previousElementSibling;
//排除子节点中的text元素
/*标签与标签之间不能换行，每当你换行JS 默认会把换行当成text元素加入到数组中*/
var elem_child = cjn.childNodes;
for(var i=0 in elem_child){ //遍历子元素数组
if(elem_child[i].nodeName == "#text" && !/\S/.test(elem_child[i].nodeValue)) {
//删除数组中的text
cjn.removeChild(elem_child[i]);
}
}
//获得第一个子节点
var cjnfc = cjn.firstChild;
var dis_v = sub_menu.style.display;
if(dis_v == "block"){
sub_menu.style.display = "none";
cjnfc.className = "Triangle";//替换样式
} else{
sub_menu.style.display = "block";
cjnfc.className = "InvertedTriangle";
}
}
</script>
<style type="text/css">
#db1,#db2,#db3{
display: none;
}
#page{
width:1280px;
margin:0 auto;
text-align:center;
background-color:#F8F8F8;
border: solid 1px #E7E7E7;
}
#head{
width:1275px;
}
#content{
margin:0 auto;
width:1275px;
overflow: auto;
}
#left{
position:absolute;
height:700px;
overflow:auto;
background-color:#E7E7E7;
border:1px solid #E7E7F8;
float:left;
text-align:left;
width:250px;
}
#right{
padding-right:5px;
float:right;
width:1000px;
height: auto;
min-height: 700px;
overflow: hidden;
}
iframe{
width: 100%;
min-height: 700px;
height: auto;
}
ul,li{
list-style-type:none;
text-align:left;
margin:0px;
padding:6px;
}
li ul li{
padding-left:13px;
}
a:link{
color: #000;
text-decoration:none;
}
a:visited{
color: #000;
text-decoration:none;
}
a:hover{
color: #ff0000;
text-decoration:none;
}
a:active{
color: #ff0000;
text-decoration:none;
}
/* 纯CSS 画图标 */
.InvertedTriangle {
text-align:center;
width:0px;
height:0px;
float:left;
border-top:10px solid #000000;
border-left:5px solid transparent;
border-right:5px solid transparent;
position: relative;
top: 5px;
right: 8px;
}
.Triangle {
text-align:center;
padding-right:5px;
width: 0;
height:0;
float: left;
border-left: 10px solid #000000;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
position: relative;
top: 5px;
right: 5px;
}
</style>
<body>
<p id="page">
<p id="head" style="width:100%;hegint:50px;">
<h1>Mysql数据库</h1>
</p>
<p id="content">
<p id="left">
<p>数据库地址是127.0.0.1</p>
<ul>
<li>
<span onclick="f('db1')">
<span class="Triangle"></span><span>数据库一</span></span>
<ul id="db1">
<li>表一</li>
<li>表二</li>
<li>表三</li>
</ul>
</li>
<li>
<span onclick="f('db2')"><span class="Triangle"></span><span>数据库二</span></span>
<ul id="db2">
<li><a href="https://www.baidu.com" target="myFrameName">表一</a></li>
<li>表二</li>
<li>表三</li>
</ul>
</li>
<li><span onclick="f('db3')"><span class="Triangle"></span><span>数据库三</span></span>
<ul id="db3">
<li>表一</li>
<li>表二</li>
<li>表三</li>
</ul>
</li>
</ul>
</p>
<p id="right">
<iframe id="myFrameName" width="100%" height="100%" scrolling="no" name="myFrameName" frameborder="0" ></iframe>
</p>
</p>
</p>
</body>
</html>
