jquery操作节点完成三级菜单文字按钮来回转换

效果如图

这是一个三级菜单，点击如图：
再次切换如图

同时也可以选择一级和二级菜单，不多展示
html代码如下：

<div id="menu">
<ul>
<li><a href="#" name="one" onclick="dropone(this)">保安</a></li>
<li>
<a href="#" name="one" onclick="dropone(this)">保洁</a>
<ul>
<li>
<a href="#" onclick="droptwo(this)">办公室</a>
<ul>
<li><a href="#" onclick="dropthree(this)">桌子清洁</a></li>
<li><a href="#" onclick="dropthree(this)">地面清扫</a></li>
</ul>
</li>
<li><a href="#" onclick="droptwo(this)">总裁</a></li>
<li><a href="#" onclick="droptwo(this)">发展</a></li>
<li><a href="#" onclick="droptwo(this)">荣誉</a></li>
</ul>
</li>
<li>
<a href="#" class="onedropdown" name="one" onclick="dropone(this)">超级绿化</a>
<ul>
<li>
<a href="#" onclick="droptwo(this)">公园绿化</a>
<ul>
<li><a href="#" onclick="dropthree(this)">树林绿化</a></li>
<li><a href="#" onclick="dropthree(this)">花园绿化</a></li>
</ul>
</li>
<li>
<a href="#" onclick="droptwo(this)">商场绿化</a>
<ul>
<li><a href="#" onclick="dropthree(this)">街角绿化</a></li>
<li><a href="#" onclick="dropthree(this)">电梯绿化</a></li>
</ul>
</li>
<li>
<a href="#" onclick="droptwo(this)">住宅绿化</a>
<ul>
<li><a href="#" onclick="dropthree(this)">阳台绿化</a></li>
<li><a href="#" onclick="dropthree(this)">超级绿化</a></li>
<li><a href="#" onclick="dropthree(this)">哈哈绿化</a></li>
<li><a href="#" onclick="dropthree(this)">知道绿化</a></li>
<li><a href="#" onclick="dropthree(this)">哇哈绿化</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" name="one" onclick="dropone(this)">设施</a></li>
<li><a href="#" name="one" onclick="dropone(this)">管家</a></li>
<li><a href="#" name="one" onclick="dropone(this)">综合</a></li>
<li><a href="#" name="one" onclick="dropone(this)">其他</a></li>
</ul>
</div>

css代码如下：

#menu > ul > li > a {
display: block; /*指定背景色占整块,不然背景色只在字体下有*/
text-decoration: none; /*取消下划线*/
background-color: #fff; /*菜单背景色*/
line-height: 30px; /*调整行高*/
text-align: center;
color: #3ABBF7;
font-weight: 400;
padding: 0 21px 0 21px;
}

#menu > ul > li > ul a {
display: block; /*指定背景色占整块,不然背景色只在字体下有*/
text-decoration: none; /*取消下划线*/
background-color: #fff; /*菜单背景色*/
line-height: 30px; /*调整行高*/
text-align: center;
color: #3ABBF7;
font-weight: 400;
}

#menu ul {
list-style: none; /*取消前缀符号*/
z-index: 9999;
margin: 0;
}

#menu ul li a:hover {
background: #3ABBF7;
color: #fff;
}

#menu > ul > li {
margin-right: 5px;
}
/*上面的是样式可有可无*/

#menu > ul > li {
float: left; /*取消首行菜单换行*/
position: relative;
top: 0;
border: 1px solid #3ABBF7;
height: 32px;
}

#menu > ul > li ul li {
width: 72px;
height: 32px;
border: 1px solid #3ABBF7;
position: relative;
margin-right: 3px;
}

#menu ul {
padding-left: 0px;
}

#menu ul ul {
display: none; /*第二级菜单默认隐藏*/
position: absolute;
left: -1px;
}

#menu ul :hover ul :hover ul {
display: block;
left: 72px;
top: -1px; /*菜单左右保持对持,如果不加则往下移一格*/
}

#menu ul :hover ul, #menu ul :hover ul :hover ul :hover ul, #menu ul :hover ul :hover ul :hover ul :hover ul {
display: block; /*:hover是关键,且:hover前的空格使用也很关键,个人觉得加空格就是前面的元素一起保持:hover*/
}

#menu ul :hover ul ul, #menu ul :hover ul :hover ul ul, #menu ul :hover ul :hover ul :hover ul ul {
display: none; /*:hover只显示下一级菜单,下一级以下的菜单隐藏

*/
}
.addstyle {
background:#3ABBF7;
color:#fff;
}

js代码如下：

//点击下拉菜单一级效果
function dropone(one) {
droprestore();
var oneVal = $(one).html().split("-");
$(one).html(oneVal[0]);
$(one).css("background", "#3ABBF7");
$(one).css("color", "#fff");
}
//点击下拉菜单二级效果
function droptwo(two) {
droprestore();
var twoVal = $(two).html();
var oneVal = $(two).parent().parent().prev().html().split("-");
var one = $(two).parent().parent().prev();
var countVal = oneVal[0] + "-" + twoVal;
one.html(countVal);
one.css("background", "#3ABBF7");
one.css("color", "#fff");
}
//点击下拉菜单三层的效果
function dropthree(three) {
droprestore();

var threeVal = $(three).html();
var twoVal = $(three).parent().parent().prev().html();
var oneVal = $(three).parent().parent().parent().parent().prev().html().split("-");
var one = $(three).parent().parent().parent().parent().prev();

var countVal = oneVal[0] + "-" + twoVal + "-" + threeVal;
one.html(countVal);
one.css("background", "#3ABBF7");
one.css("color", "#fff");
}
function droprestore() {
var myArr = new Array();
myArr = $("a[name='one']");
console.log(myArr);
for (var i = 0; i < myArr.length; i++) {
var res = myArr[i].innerHTML.split("-");
myArr[i].innerHTML = res[0];
}
//myArr.removeClass("addstyle");
myArr.css("background", "#fff");
myArr.css("color", "#3ABBF7");
}

只是一些简单的节点操作。没啥好i研究的，正好做了，分享一下。