JS实现子父节点菜单的添加

 <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节点添加</title>
    <style>
        #ul1 h3,ul li{cursor:pointer}
    </style>
    <script>
        window.onload=function () {
            var oButn=document.getElementById('butn');
            var oText = document.getElementById('text');
            var oUl = document.getElementById('ul1');
            var oH3 = document.getElementsByTagName('h3');
            for (var i = 0; i < oH3.length; i++) {
                oButn.onclick = function () {                 //在父节点上添加父节点
 var oTit = document.createElement('h3');
                    oTit.innerHTML = oText.value;
                    oUl.appendChild(oTit);
                };
                for (var i = 0; i < oH3.length; i++) {
                    (function () {                                   //创建闭包函数,并且()内为隐型的形参
 var temp = i;                                 //添加变量temp并且赋值
 oH3[temp].onclick = function () {
                            var oNav1 = document.getElementById('nav' + temp);
                            var oList = document.getElementById('list' + temp);
                            oNav1.onclick = function () {             //在子节点上添加子节点
 var oCre2 = document.createElement('li');
                                oCre2.innerHTML = oText.value;
                                oList.appendChild(oCre2);
                            }
                        }

                    })();          //这里()为隐型实参
 }
            }
        }
    </script>
</head>
<body>
<input id="text" type="text" value="我的实际">
<input id="butn" type="button" value="确定">

<div id="ul1">
    <h3 id="nav0" class="nav1">11111
        <ul id="list0" class="list1">
            <li>aaaaa</li>
            <li>bbbbb</li>
            <li>ccccc</li>
        </ul>
    </h3>

    <h3  id="nav1" class="nav1">22222
        <ul id="list1" class="list1">
            <li>ddddd</li>
            <li>eeeee</li>
            <li>fffff</li>
        </ul>
    </h3>
    <h3 id="nav2" class="nav1">33333
        <ul id="list2" class="list1">
            <li>ggggg</li>
            <li>hhhhh</li>
            <li>jjjjj</li>
        </ul>
    </h3>
</div>

</body>
</html>

转载于:https://my.oschina.net/LeesurYoo/blog/665722

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
点击父级级展开,或者收起 <script type=text/javascript><!-- var LastLeftID = ""; function menuFix() { var obj = document.getElementById("nav").getElementsByTagName("li"); for (var i=0; i<obj.length; i++) { obj[i].onmouseover=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } obj[i].onMouseDown=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } obj[i].onMouseUp=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } obj[i].onmouseout=function() { this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), ""); } } } function DoMenu(emid) { var obj = document.getElementById(emid); obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded"); if((LastLeftID!="")&&(emid!=LastLeftID)) //关闭上一个Menu { document.getElementById(LastLeftID).className = "collapsed"; } LastLeftID = emid; } function GetMenuID() { var MenuID=""; var _paramStr = new String(window.location.href); var _sharpPos = _paramStr.indexOf("#"); if (_sharpPos >= 0 && _sharpPos < _paramStr.length - 1) { _paramStr = _paramStr.substring(_sharpPos + 1, _paramStr.length); } else { _paramStr = ""; } if (_paramStr.length > 0) { var _paramArr = _paramStr.split("&"); if (_paramArr.length>0) { var _paramKeyVal = _paramArr[0].split("="); if (_paramKeyVal.length>0) { MenuID = _paramKeyVal[1]; } } /* if (_paramArr.length>0) { var _arr = new Array(_paramArr.length); } //取所有#后面的,菜单只需用到Menu //for (var i = 0; i < _paramArr.length; i++) { var _paramKeyVal = _paramArr[i].split('='); if (_paramKeyVal.length>0) { _arr[_paramKeyVal[0]] = _paramKeyVal[1]; } } */ } if(MenuID!="") { DoMenu(MenuID) } } GetMenuID(); //*这两个function的顺序要注意一下,不然在Firefox里GetMenuID()不起效果 menuFix(); --></script>

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值